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,还需要下判断所绑定初始值的类型。
查了查网上也没有关于这方面的解释,给自己挖个坑以后学深入了读一读源码。
Vue的v-model在checkbox中表现为:数组类型时绑定元素value,其他类型则绑定checked并转换为布尔值。文章探讨了这种情况,并指出在处理复选框时需考虑初始值类型。作者计划未来深入研究源码以了解更多。
1112

被折叠的 条评论
为什么被折叠?



