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。