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。