免费公司网站申请,网站让百度收录,网站的素材做logo,温州网站设计平台在vue2中使用v-model绑定checkbox input typecheckbox v-modelisChecked :valueisChecked changehandleCheckboxChange /监听change事件#xff0c;并在change事件中做一些特殊处理#xff0c;比如用户在登录时有没有阅读过隐私…在vue2中使用v-model绑定checkbox input typecheckbox v-modelisChecked :valueisChecked changehandleCheckboxChange /监听change事件并在change事件中做一些特殊处理比如用户在登录时有没有阅读过隐私协议在此之前有没有先填写手机号如果没有通过校验对于checkbox选中状态下应该取消选中。
问题
bodydiv idappdivinput typecheckbox v-modelisChecked :valueisChecked changehandleCheckboxChange /label{{ isChecked }}/label/div/div
/body/html
scriptvar app new Vue({el: #app,data() {return {isChecked: false};},methods: {handleCheckboxChange() {console.log(checkbox now: this.isChecked)this.isChecked !this.isChecked;console.log(run[this.isChecked !this.isChecked;] checkbox now: this.isChecked)}}})
/script再执行this.isChecked !this.isChecked后checkbox的状态依旧是选中状态并没有动态更新视图v-model绑定的值为false但是依旧是选中状态
为什么
首先来看v-model对于checkbox的原理 v-model对于checkbox是实现的checked与change事件的结合语法糖通过代码我们也可以看出属性已经很好的完成了响应的变化这就可能是由于html元素input本身的原因了再去看一下checkbox的属性 可以发现checked只会在首次渲染随后的checked值改变不再反应该变化由此可见为什么checkbox样式框没有发生变化的原因了
解决方案
1.刷新组件页面重新渲染 this.$nextTick(() {this.isChecked !this.isChecked;});2.绑定checkbox的value值
input typecheckbox :valueisChecked changehandleCheckboxChange /使用v-model没有value属性
