🥦 Vue 数据绑定
2025-01-22 08:19:30    366 字    #前端 #🥦 Vue
This post is also available in English and alternative languages.

Vue 中的数据绑定是一种机制，用于将数据与视图进行实时的同步更新，当数据发生改变时，对应的视图也会随之更新，实现了数据和视图的自动关联。


Vue 中有两种数据绑定的方式:

  • 单向绑定（v-bind）：数据只能从 data 流向页面。

  • 双向绑定（v-model）：数据不仅能从 data 流向页面,还可以从页面流向 data。

    注意：
    双向绑定（v-model）一般都应用在表单类元素上（如: input、select等）


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<html>
<head>
    <!-- ... -->
</head>
<body>
<!--准备好一个容器-->
<div id="root">
    <!-- 普通写法 -->
    <div>
        单向数据绑定：<input type="text" v-bind:value="name">
        <br>
        双向数据绑定：<input type="text" v-model:value="name">
    </div>
    <!-- 简写 -->
    <div>
        简写-单向数据绑定：<input type="text" :value="name">
        <br>
        简写-双向数据绑定：<input type="text" v-model="name">
    </div>
    <div>
        <!-- 如下代码是错误的, 因为 v-model 只能应用在表单类元素(输入类元素)上 -->
        <!-- <h2 v-model:x="name">hello</h2> -->
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            name: '中国山东蓝翔'
        }
    });
</script>
</body>
</html>