对于单选按钮,复选框及选择框的选项,v-model
绑定的值通常是静态字符串。
对于单选框,绑定的是value值。
<label for="male">
<input type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex">女
</label>
<h2>{{sex}}</h2>
对于单个复选框,绑定到布尔值。
<input type="checkbox" value="篮球" v-model="isoptions">篮球
注意:选项data中,要声明isoptions变量,默认值为false,isoptions:false,页面操作,勾选上,那么v-model会自动绑定更新isoptions变量,更新为true.
对于多个复选框,可绑定到同一数组。双向绑定绑定的是value值。
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
注意:data选项中,checkbox的vulue属性值必须要有,否则勾选一个,其他的也会勾选上,显示异常.
<script type="text/javascript">
new Vue({
el:'#app',
data:{
sex : '',
isoptions : false,
hobbies:[]
}
})
</script>