Vue2.js学习笔记-04(表单元素数据的双向绑定)

最新推荐文章于 2024-05-28 00:19:30 发布

笑笑是一个码农

最新推荐文章于 2024-05-28 00:19:30 发布

阅读量1k

点赞数

分类专栏： Vue2 文章标签： vue v-model 数据绑定前端 HTML

本文链接：https://blog.csdn.net/u012430402/article/details/92803548

版权

Vue2 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、回顾

上一次我学习了一些常用的事件修饰符，今天要学习的是表单元素数据的双向绑定。

二、v-model指令

首先要了解，什么是数据的双向绑定，就是当页面上的数据改变时，与其绑定的vue实例的属性的值要同步修改，反之亦然。

v-text、v-bind指令都可以将vue实例中的属性的值渲染到对应绑定的表单元素上，当我们修改vue实例属性中的值，会同步修改页面渲染的值，但反之，不会修改vue实例属性中的值，下面我使用v-bind指令来演示这种情况。

如下代码运行：

<body>
    <div id = "app">
      <!--  使用v-bind将value与vue实例中msg属性进行绑定 -->
      请输入:<input type="text" :value="msg" />
    </div>
 
    <script src="../js/vue.2.6.10.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "啊啊啊"
            }
        })
    </script>
</body>

页面的初始状态如下:

可以看到input输入框中的原始数据为"啊啊啊"，我在Console中修改一下msg的值，如下：

可以看到，当我们修改了vue实例中属性的值后，会同步修改页面上渲染的值。

接下来刷新一下页面，让其恢复到最初的状态，然后修改input中的值，在Console中输出vue实例中msg的值，如下：

可以看到，修改了页面上的值，并没有同步修改vue实例中msg中的值。

将v-bind换成v-model，代码如下：

<body>
    <div id = "app">
      <!--  v-model指令实现表单元素数据的双向绑定 -->
      请输入:<input type="text" v-model="msg" />
    </div>
 
    <script src="../js/vue.2.6.10.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "啊啊啊"
            }
        })
    </script>
</body>

重复上面修改input中的值的步骤，在Console中再次输出vue实例中msg的值，如下：

可以看到，当页面上表单元素的值修改时，vue实例中属性的值也会同步修改。

笑笑是一个码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2.js学习笔记-04(表单元素数据的双向绑定)

一、回顾上一次我学习了一些常用的事件修饰符，今天要学习的是表单元素数据的双向绑定。二、v-model指令首先要了解，什么是数据的双向绑定，就是当页面上的数据改变时，与其绑定的vue实例的属性的值要同步修改，反之亦然。v-text、v-bind指令都可以将vue实例中的属性的值渲染到对应绑定的表单元素上，当我们修改vue实例属性中的值，会同步修改页面渲染的值，但反之，不会修改vue实...
复制链接

扫一扫

专栏目录