vue中的input使⽤e.target.value赋值的问题
很久不写博客了。。。
vue中对表单的处理,相对原⽣js,增加了⼀个双向绑定的语法糖:v-model。官⽅⽂档⾥有⼀段:
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值⽽总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件
的 data 选项中声明初始值。
这段话很重要。我们知道,input有各种原⽣事件(oninput,onchange等),⽽原⽣事件⾥可以⽤e.target.value对输⼊框进⾏赋值。这时候就有个问题了,对e.target.value渎职和v-model绑定的数据直接修改有什么冲突吗?答案是有的,有可能造成数据不统⼀的情况:页⾯上显⽰的值与绑定的值不⼀致。如果要进⾏校验等操作,可以修改v-model绑定的值,⽽不是修改e.target.value。
上⾯这个例⼦⾥就会出现数据不统⼀的情况。页⾯显⽰6,⽽获取this.value真实值是。