v-bind 是 vue2 中动态绑定 html 属性的核心指令，支持单属性绑定（如 :src、:disabled）、多属性对象语法、class/style 动态控制及向子组件传 props。
v-bind 是 Vue2 中用于动态绑定 HTML 元素属性的核心指令，它的本质是让属性值随数据变化而自动更新，而不是写死在模板里。
绑定单个属性（最常用）
用法：在属性前加 v-bind: 前缀，或直接用缩写 :。右侧是 Vue 实例中定义的数据、计算属性，或合法的 JavaScript 表达式。
- 绑定图片地址：
<img :src="avatarUrl" alt="头像">，其中avatarUrl是 data 里的字符串，比如'/images/user1.jpg' - 绑定链接地址：
@#@#@#@#@#@#@#@#@#@0，profileLink可以是'/user/123'或动态拼接的'/user/' + userId - 控制按钮禁用状态：
<button :disabled="isSaving">保存中...</button>，当isSaving为 true 时按钮自动禁用
绑定多个属性（对象语法）
当需要一次性绑定多个属性时，推荐使用 v-bind="对象" 写法，对象的 key 就是属性名，value 就是对应值。
- 例如：
<input v-bind="{ value: inputValue, placeholder: '请输入', disabled: isLocked }"> - 等价于分别写
:value、:placeholder、:disabled，但更简洁，尤其适合属性较多或来自同一配置对象的场景 - 对象可以是 data 中的普通对象，也可以是 computed 返回的对象，便于逻辑复用
绑定 class 和 style（高频实用场景）
v-bind 不仅能绑定原生属性，也广泛用于动态控制样式类名和内联样式。
- class 绑定支持对象语法：
<div :class="{ active: isActive, 'text-bold': isBold }"></div>，键是类名，值是布尔表达式 - 也支持数组语法：
<div :class="[baseClass, { active: isActive }]"></div>，混合静态类与动态类 - style 绑定类似：
<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>，注意 CSS 属性名用驼峰或短横线字符串均可
向子组件传 props（父子通信基础）
父组件用 v-bind 把数据作为 prop 传给子组件，子组件通过 props 接收。
- 父组件中：
<user-card :name="userName" :age="userAge" :is-vip="hasVip"></user-card> - 子组件定义：
props: ['name', 'age', 'isVip']或更严谨地写成对象形式校验类型 - 注意：HTML 中属性名不区分大小写，所以
is-vip对应 JS 中的isVip（kebab-case 自动转 camelCase）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
