13.指令v-model的本质

最新推荐文章于 2025-06-16 10:28:34 发布

原创最新推荐文章于 2025-06-16 10:28:34 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

vue学习专栏收录该内容

40 篇文章

订阅专栏

本文通过实例解析了Vue中v-model指令的工作原理。展示了如何通过v-on:input和v-bind:value手动实现双向数据绑定，并对比了v-model的简化作用。

从案例可以看出，v-model 是通过<input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'> 去实现的，

v-on:input='msg=$event.target.value' ; 数据改变

v-bind:value="msg" ：更新数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{msg}}</div>
    <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'>
    <input type="text" v-model='msg'>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      v-model指令的本质

    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      },
      methods: {
        handle: function(event){
          // 使用输入域中的最新的数据覆盖原来的数据
          this.msg = event.target.value;
        }
      }
    });
  </script>
</body>
</html>