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

Vue的v-model在checkbox中表现为:数组类型时绑定元素value,其他类型则绑定checked并转换为布尔值。文章探讨了这种情况,并指出在处理复选框时需考虑初始值类型。作者计划未来深入研究源码以了解更多。

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,还需要下判断所绑定初始值的类型。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值