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

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">Onelabel>
            <br>
            <span>Picked: {{ picked }}span>
          div>
    div>
    <script>
        let app = new Vue ({
            el : "#app",
            data:{  
                picked: "c"
            },
        });
    script>

​ 结果为:在这里插入图片描述
​ 取消选中后:Vue中使用v-model绑定checkbox数据的问题_第1张图片

而如果初始值为空数组,则会:
在这里插入图片描述
Vue中使用v-model绑定checkbox数据的问题_第2张图片
我认为v-model会先根据控件类型自动选择绑定哪一个属性然后按照正确方法更新元素。而对于复选框checkbox,还需要判断初始值的类型。

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

你可能感兴趣的:(Vue)