VUE中v-model对单选框复选框的输入绑定

4,035 阅读1分钟

对于单选按钮,复选框及选择框的选项,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>