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,还需要判断初始值的类型。
查了查网上也没有关于这方面的解释,给自己挖个坑以后学深入了读一读源码。
相关文章推荐
- vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
- vue自定v-model实现表单数据双向绑定问题
- vue.js使用v-model指令实现的数据双向绑定功能示例
- vue 动态生成 el-checkbox-group 遇到的v-model绑定问题及解决方法
- vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
- vue中关于checkbox数据绑定v-model指令的个人理解
- angular2在双向数据绑定时[(ngModel)]无法使用的问题
- layui与vue同时使用,绑定数据,无法正确显示的问题
- 使用vue,获取input输入值(不使用双向数据绑定),参数e的问题
- vue v-model 与 vuex state数据绑定问题
- Vue 双向数据绑定 V-model 通常配合input 使用
- vue-cli checkbox绑定数据使用
- vue下使用select2,绑定数据问题
- angular2在双向数据绑定时[(ngModel)]无法使用的问题
- 解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
- 使用Model Binder绑定Action参数字段时的取舍问题
- 在ascx中使用DropDownList绑定数据页面刷新时变空的问题
- vue 开发中element-ui库的switch开关绑定number类型数据不成功问题
- 使用v-for和v-model将数据循环绑定
- EXTJS4中使用CheckboxGroup回填数据问题