定义#

v-bind指令用于动态绑定HTML标签的属性值，如href、src、style、class等。它可以将Vue实例中的数据绑定到HTML元素的属性上。

语法/用法#

1
<img v-bind:src="item.image" width="30px">

1
<img :src="item.image" width="30px">

1
<!-- 绑定class -->
2
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
3

4
<!-- 绑定style -->
5
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

1
<a :href="url" :title="title" :target="target">链接</a>

常见场景#

1. 动态图片路径：根据数据动态显示图片
2. 动态链接：根据条件生成不同的URL
3. 样式绑定：根据状态动态改变元素样式
4. 类名绑定：根据条件添加或移除CSS类
5. 表单属性：动态设置input的disabled、checked等属性

注意事项#

1. 数据源要求：

   • v-bind绑定的数据必须在data()中定义
   • 或基于data()中定义的数据计算而来

2. 简写形式：

   • :属性名="属性值"是v-bind:属性名="属性值"的简写
   • 推荐使用简写形式，代码更简洁

3. class和style绑定：

   • 可以绑定对象、数组或字符串
   • 对象语法：键为类名，值为布尔值
   • 数组语法：包含多个类名字符串

4. 属性值类型：

   • 可以是字符串、数字、布尔值、对象或数组
   • Vue会自动进行类型转换

5. 性能考虑：

   • 避免在绑定的表达式中进行复杂计算
   • 复杂计算建议使用计算属性