vue中v-model双向数据绑定的底层原理

最新推荐文章于 2024-03-26 16:22:53 发布

Doraemon_XiaoLi

最新推荐文章于 2024-03-26 16:22:53 发布

阅读量391

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/fvbxjnch/article/details/108560108

版权

双向数据绑定

在vue中实现数据双向绑定的指令是v-model。接下来简单介绍一下v-model指令实现的底层原理

v-bind可以用来绑定属性
v-on可以绑定事件
使用v-bind将input输入框的值设置为msg
设置输入事件，将输入框的值最新数据覆盖原来的msg的数据

<body>
  <div id="app">
    <div>{{msg}}</div>
    <input type="text" v-model="msg">
    <input type="text" v-bind:value="msg" v-on:input="handle">
    //不用设置输入事件写法
    <input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      },
      methods: {
        handle: function (event) {
          // 使用输入域中的最新的数据覆盖原来的数据
          this.msg = event.target.value;
        }
      }
    });
  </script>
</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Doraemon_XiaoLi

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中v-model双向数据绑定的底层原理

双向数据绑定在vue中实现数据双向绑定的指令是v-model。接下来简单介绍一下v-model指令实现的底层原理v-bind可以用来绑定属性v-on可以绑定事件使用v-bind将input输入框的值设置为msg设置输入事件，将输入框的值最新数据覆盖原来的msg的数据<body> <div id="app"> <div>{{msg}}</div> <input type="text" v-model="msg">
复制链接

扫一扫