数据绑定

# 单向绑定

v-bind只能通过Vue实例data里的属性，单向改变html标签表达式的值

反过来html标签表达式的值，却不能修改Vue实例data里的属性的值

# 双向绑定

v-model 能够实现 html标签表达式的值和 Vue实例data里的属性的值双向绑定

一方改变都会同步改变另一方

例子

<div id="app">
    <!-- 老实人写法 -->
    <!-- 单向数据绑定：<input type="text" v-bind:value="message"> <br/>
    双向数据绑定：<input type="text" v-model:value="message"> -->

    <!-- 社会人写法 -->
    单向数据绑定：<input type="text" :value="message"> <br/>
    双向数据绑定：<input type="text" v-model="message">     <!--因为v-model默认就是收集value-->
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
  },
})
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

v-model 只能应用于表单类html元素（输入类元素）上，即要由value值；因为v-model默认收集的是value值

编辑

#Vue #Vue核心