数据绑定

Vue 的数据绑定机制使得数据与视图之间的同步变得简单。

单向数据绑定

v-bind 绑定 attribute

HTML

<img v-bind:src="imageSrc" />
<div v-bind:id="dynamicId"></div>

简写形式

HTML

<img :src="imageSrc" />
<div :id="dynamicId"></div>

双向数据绑定

v-model 基础用法

HTML

<input v-model="message" placeholder="编辑我..." />
<p>{{ message }}</p>

v-model 会根据输入类型自动选择正确的方法更新数据。

修饰符

HTML

<!-- 自动转换为数字 -->
<input v-model.number="age" type="number" />

<!-- 自动去除首尾空格 -->
<input v-model.trim="name" />

<!-- 延迟同步（默认 input 事件改为 change 事件） -->
<input v-model.lazy="msg" />

绑定对象

HTML

<div v-bind="{ id: 'myDiv', class: 'active' }"></div>

要点总结

v-bind（简写 :）用于单向 attribute 绑定
v-model 用于表单元素的双向数据绑定
修饰符 .number、.trim、.lazy 可改变绑定行为
支持绑定整个对象