v-model指令实现数据双向绑定

最新推荐文章于 2024-05-25 09:23:30 发布

ey蜡笔没了小新

最新推荐文章于 2024-05-25 09:23:30 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/control_ling/article/details/104436454

版权

vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

学习了 v-bind 指令后，发现这个指令只能实现单向绑定数据，从 M（数据）自动绑定到 V（视图），无法实现数据的双向绑定，但是 v-model 可以实现啊

接下来要将的就是 v-model 怎么实现数据的双向绑定，要知道数据双向绑定可是MVVM的强大之处

<body>

  <div id="app">

    <h4>{{ msg }}</h4>

    <input type="text" v-bind:value="msg" style="width:100%;">

    <input type="text" style="width:100%;" v-model="msg">

  </div>

  <script>

    var vm = new Vue({
      el: '#app',
      data: {
        msg: '大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！'
      },
      methods: {
      }
    });

  </script>

</body>

先看看运行结果：

然后，把第一个输入框的值改变一下：

这里 V 的改变并没有改变 M（data）中的值

于是把第二个输入框的值改一下：

会发现，所有都会随着第二个输入框的值改变

由此可以看出，v-bind 只能实现 M 到 V 的单向绑定，而 v-model 可以实现 M 和 V 之间的数据双向绑定，这为我们处理数据和开发提供了极大的遍历

但是有一点需要注意的是：v-model 只能运用在表单元素中

比如：input(radio, text, address, email....) select checkbox textarea 等

ey蜡笔没了小新

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-model指令实现数据双向绑定

学习了 v-bind 指令后，发现这个指令只能实现单向绑定数据，从M（数据）自动绑定到V（视图），无法实现数据的双向绑定，但是 v-model 可以实现啊接下来要将的就是 v-model 怎么实现数据的双向绑定，要知道数据双向绑定可是MVVM的强大之处<body> <div id="app"> <h4>{{ msg }}<...
复制链接

扫一扫