- 表单checkbox,绑定的v-model是一个布尔值,要么为true,要么为false;
- 因为它是勾选,或者不勾选的形式;
- 为true了就是勾选,为false了就是不勾选;
代码:
<body>
<div id="box">
<input type="checkbox" v-model="isRemember">记住用户名
</div>
<script>
new Vue({
el:"#box",
data:{
isRemember:false
}
})
</script>
</body>
结果:
对于checkbox多选值的绑定:
对于多选值的绑定,不能像上面那样,直接v-model是true或者false了,如果是这样的话,那就是三个都勾选,或者三个都不勾选,就实现不了自由多选的目的了;
如果说给每一个checkbox都加上不一样的v-model值,那数据多了呢,多冗余,也不好操作;
而且我们要返回前端勾选的数据给后端,要知道选择了哪些内容;
这时候我们就需要引入checkbox的value值;
<body>
<div id="box">
<h2>注册页面--兴趣爱好</h2>
<input type="checkbox" v-model="checkList" value="vue">vue
<input type="checkbox" v-model="checkList" value="react">react
<input type="checkbox" v-model="checkList" value="wx">小程序
<div>{{checkList}}</div>
</div>
<script>
new Vue({
el:"#box",
data:{
checkList:[]
}
})
</script>
</body>
结果:
对于checkbox单选值的绑定:
- 只要保证v-model绑定的是同一个变量;
- 更改变量选择的value值;
<body>
<div id="box">
<h2>注册页面--性别选择</h2>
<input type="radio" v-model="select" value="a">男
<input type="radio" v-model="select" value="b">女
</div>
<script>
new Vue({
el:"#box",
data:{
select:"a"
}
})
</script>
</body>
结果:
- v-model的作用是双向绑定,获取到value值,当select等于a,也就是选择value=a的input标签,反之一样。
Vue的架构模式是:(面试题)
mvc(错),是mvvm(双向数据绑定)
mvvm:Model-View-ViewModel