vue怎么实现绑定

数据绑定基础

Vue 通过 v-bind 指令实现单向数据绑定（数据从模型到视图），语法为 v-bind:属性="数据" 或简写为 :属性="数据"。例如绑定 src 属性：

<img :src="imageUrl">

此时 imageUrl 的变化会自动更新到 src 属性。

双向数据绑定

使用 v-model 实现表单元素与数据的双向绑定（视图和模型同步更新）。适用于 <input>、<select>、<textarea> 等表单元素：

<input v-model="message">

数据 message 会随用户输入实时更新，反之亦然。

动态样式与类绑定

通过 :class 和 :style 实现动态样式：

<div :class="{ active: isActive }"></div>
<div :style="{ color: textColor }"></div>

isActive 为 true 时添加 active 类，textColor 的值决定文本颜色。

事件绑定

使用 v-on 或 @ 简写绑定事件：

<button @click="handleClick">点击</button>

handleClick 需在 Vue 实例的 methods 中定义。

计算属性与监听器

对于复杂逻辑，可使用 computed 计算属性：

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

监听数据变化使用 watch：

watch: {
  message(newVal, oldVal) {
    console.log('消息变化:', newVal);
  }
}

条件与列表绑定

v-if 和 v-for 实现条件渲染和列表渲染：

<div v-if="show">显示内容</div>
<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

v-for 需配合 :key 提升渲染性能。

自定义组件绑定

在组件中使用 v-bind 传递 props：

<child-component :title="parentTitle"></child-component>

子组件通过 props 接收：

props: ['title']

高级绑定技巧

• 动态属性名：使用方括号绑定动态属性名。

  <div :[dynamicAttr]="value"></div>

• 修饰符：如 v-model.trim 自动去除输入首尾空格。
• 插槽绑定：通过作用域插槽向父组件传递数据。