Vue数据绑定 | iGmaBlog

单向绑定

在前面我们用到了 v-bind 做数据的绑定，其实 v-bind 就是单项绑定。

单向绑定：数据只能从 data 流向页面。

代码：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        单项绑定：<input type="text" :value="name"><br>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                name: 'iGma'
            }
        })
    </script>
</body>
</html>

对 input 标签的 value 属性使用单项绑定，表达式为 nema 的值。
当我在 input 标签中输入数据时，只会影响 input 的 value，而不会影响 data 里的 name。
运行结果

双向绑定

双向绑定：数据不仅仅从 data 流向页面，还可以从页面反向流向 data。
关键字：v-model

用法

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        单项绑定：<input type="text" :value="name"><br>
        双项绑定：<input type="text" v-model:value="name"><br>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                name: 'iGma'
            }
        })
    </script>
</body>
</html>

运行结果

当我在下面的输入内输入 123 时，data 里的数据页随着改变。

代码简写

v-model 默认对 value 进行双向绑定，所以可以省略后面的 value 关键字

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        单项绑定：<input type="text" :value="name"><br>
        单项绑定：<input type="text" v-model="name"><br>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                name: 'SevenOne'
            }
        })
    </script>
</body>
</html>

运行效果同上。

总结

Vue 中有两种数据绑定方式。
单向绑定 v-bind ：数据只能从 data 流向页面。
双向绑定 v-model ：数据不仅能从 data 流向页面，还可以从页面流向 data。
注意：双向绑定一般应用在表单类元素上，用在其他标签的属性上时会报错。

单向绑定 ​

双向绑定 ​

总结 ​

单向绑定

双向绑定

总结