您的位置:首页 > Web前端 > Vue.js

Vue中使用v-model绑定checkbox数据的问题

2020-06-06 04:47 429 查看

Vue中使用v-model可以在元素上创建双向数据绑定,在一般情况下,它会绑定元素上的value属性
例如单选框radio,无论初始值是哪种类型,v-model始终绑定的都是元素的value值

但是在checkbox中,发现情况会稍有不同,具体分为两种情况:

1.初始化值为数组类型:此时v-model绑定的是元素的value属性

2.初始化值为其它类型 :此时v-model绑定的是元素的checked属性,此时它会将其他类型的初始值(字符串,数字等)转化为布尔类型渲染到页面上、

例如

<div id="app">
<div id="example-4">
<input type="checkbox" id="one"  value="one" v-model="picked">
<label for="one">One</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
</div>
<script>
let app = new Vue ({
el : "#app",
data:{
picked: "c"
},
});
</script>

​ 结果为:
​ 取消选中后:

而如果初始值为空数组,则会:


我认为v-model会先根据控件类型自动选择绑定哪一个属性然后按照正确方法更新元素。而对于复选框checkbox,还需要判断初始值的类型。

查了查网上也没有关于这方面的解释,给自己挖个坑以后学深入了读一读源码。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: