Vue v-model原理

Fort_111

已于 2022-04-03 23:29:15 修改

阅读量750

点赞数

分类专栏： Vue 文章标签： vue.js

于 2022-04-03 23:22:27 首次发布

本文链接：https://blog.csdn.net/Fort_111/article/details/123946976

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文深入探讨了Vue中v-model的工作原理，它实际上是v-bind:value和v-on:input事件的语法糖。通过一个简单的例子展示了如何使用v-model实现双向数据绑定，其中input元素的值与Vue实例的msg属性同步，并在用户输入时触发inputFn方法更新数据。

摘要由CSDN通过智能技术生成

v-model 原理就 v-bind动态绑定value + v-on绑定input事件是这两个事件的语法糖


<template>
  <div>
      <input type="text" :value="msg"  @input="inputFn"/> 
      <div>{{msg}}</div>
  </div>
</template>

<script>
export default {
 name:'model',
 data(){
   return{
     msg:'',
   }
 },
 methods:{
   inputFn(ev){ 
      this.msg = ev.target.value
   }
 }
</script>