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。

<template><div class="hello"><input @input="onInput" @change="onChange" @keydown="onKeyDown" v-model="value" /><input type="button" value="点我" @click="onClick"></div></template><script>export default {name: 'HelloWorld',data() {return {value:1}},methods:{onInput(e){console.log('onInput');// e.target.value = 5;// this.value = 5;},onChange(e) {// console.log('onChange');// e.target.value = 7;// console.log(this.value);},onKeyDown(e){console.log('onKeyDown');e.target.value = 6;},onClick(e){// this.value = this.value+1;console.log(this.value);console.log();}}}</script>

上面这个例子里就会出现数据不统一的情况。页面显示6，而获取this.value真实值是64。