自定义v-model

v-model是vue实现数据双向绑定最好的一个指令,  v-model本质上不过是语法糖,它负责监听用户的输入事件以更新数据,当你修改页面的时候 v-model 自动去更新数据层 (model),当你修改数据的时候v-model自动去更新视图层 (view)

app.vue

<input type="text" :value="message" @input="changeAction"/>

data(){
    return {
      message: 'hello v-model',
    }
  },

methods: {
    changeAction(ev){
      console.log(ev.target.value);
      //经过动态绑定value值,将input事件输入的值传入
      this.message = ev.target.value;
    },
  }

下面的这个代码能够把v-model理解为  :value @input的合体
<input type="text" :value="message" @input="changeAction"/>

ok了