04vue学习——v-model实现双向数据绑定

v-model实现双向数据绑定

最新推荐文章于 2024-11-27 11:42:09 发布

原创最新推荐文章于 2024-11-27 11:42:09 发布 · 362 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了Vue.js中v-model指令的使用方法及其与v-bind指令的区别。v-model能够实现表单元素与Model数据的双向绑定，使得用户输入能够实时更新Model数据。

04vue学习——v-model实现双向数据绑定

前言

在前面我们学习了 vue 自带的五个 v- 指令，其中的 v-bind 指令是用于将 js 代码中 data 里面的数据绑定到元素的属性上去，但是 v-bind 指令只是能把 Model 模块的数据显示到页面上，并不能将在页面上对数据做出的修改保存到 Model 模块中去，即只实现了 Model 到 View 的过程，并没有实现双向的数据绑定。这时候我们应该怎么办呢？这时候我们就需要 vue 给我们提供的 v-model 指令来替我们解决这个问题了！

注意： v-model 指令只能用于表单元素中

1.使用v-bind 来绑定数据时

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model实现双向数据绑定</title>
</head>
<body>
    <div class="body">
        <!-- 使用v-bind来绑定数据 -->
        <input type="text" v-bind:value="msg1">
    </div>
    <script src="lib/vue-2.4.0.js"></script>
    <script>
        let vm = new Vue({
            el:".body",
            data:{
                msg1:"这是一段用于测试v-model的文字1！",
            },
        })
    </script>
</body>
</html>

在未对文本框的内容进行修改时，控制台打印出的msg1的值如下图所示：
在这里插入图片描述
在对文本框的内容进行修改之后成下面这样时：

控制台打印出的msg1的值如下图所示：

从上面的不同我们可以看出，使用 v-bind 来绑定属性时，不可以将在 View中对数据的修改保存到 Model 中去，只能在 View 中显示 Model 中的数据，只能实现数据从 Model 到 View。

2.使用v-model 来绑定数据时

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model实现双向数据绑定</title>
</head>
<body>
    <div class="body">
         <!-- 使用v-model来绑定数据 -->
        <input type="text" v-model="msg2">
    </div>
    <script src="lib/vue-2.4.0.js"></script>
    <script>
        let vm = new Vue({
            el:".body",
            data:{
                msg2:"这是一段用于测试v-model的文字2！",
            },
        })
    </script>
</body>
</html>

从上面的不同我们可以看出，使用 v-modell 来绑定属性时，不仅可以将 Model 中数据的在 View 中显示，还可以将在 View 中通过表单元素对数据进行的修改保存到 Model 中去。这就实现了数据的双向绑定。

2.总结

v-bind 和 v-model 的区别
（1）v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V，无法实现数据的双向绑定
（2）v-model 可以实现数据的双向绑定
（3）v-model 只能用于表单元素中
（4）v-bind 和 v-mmodel 的使用格式不同
a)v-bind:属性=“属性值” —— v-bind:value=“msg1”
b) v-model=“属性值” —— v-model=“msg2”