表单控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>表单控制</h1>
<h2>checkbox的单选</h2>
<!--checkbox的单选---》v-model绑定一个布尔值---》只要选中布尔就为true，反之亦然-->
<p><input type="checkbox" v-model="ischeck">记住密码{{ischeck}}</p>
<h2>radio</h2>
<p>
<!--2 radio的单选 v-model绑定字符串 选中字符串就是value对应的值-->
<input type="radio" v-model="gender" value="1" checked>男
<input type="radio" v-model="gender" value="2">女
<input type="radio" v-model="gender" value="0">未知
{{gender}}
</p>
<h2>checkbox的多选</h2>
<p>
<!--3 checkbox的多选---》v-model绑定一个数组---》多个选中，数组就有多个值-->
<input type="checkbox" v-model="hobby" value="篮球"> 篮球
<input type="checkbox" v-model="hobby" value="足球"> 足球
<input type="checkbox" v-model="hobby" value="橄榄球"> 橄榄球
<input type="checkbox" v-model="hobby" value="乒乓球"> 乒乓球
{{hobby}}
</p>
<h2>提交</h2>
<input type="submit" value="提交" @click="handleSubmit">
</div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
ischeck: false,
gender: '1',
hobby: []
}
},
methods: {
handleSubmit() {
console.log(this.ischeck)
console.log(this.gender)
console.log(this.hobby)
}
}
})
app.mount("#app")
</script>
</html>
本文作者：Sherwin
本文链接：https://www.cnblogs.com/sherwin1995/p/16823053.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步