vue中自定义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"/>

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_8505