继上一篇v-on深入实践之后，今天继续学习v-bind、v-for、v-model这三个核心指令。本文将结合代码示例和实际开发经验，全面讲解这些指令的使用方法和最佳实践。
一、v-bind —— 动态绑定属性
v-bind指令用于动态绑定HTML属性，它的语法糖是冒号:。这是Vue中非常常用的指令之一。
1.1 基础用法
点击查看代码
<div id="app"><!-- 完整写法 --><img v-bind:src="imageUrl" v-bind:alt="imageDesc"><!-- 语法糖写法（推荐） --><img :src="imageUrl" :alt="imageDesc"><!-- 绑定class --><div :class="{ active: isActive, 'text-danger': hasError }">动态class</div><!-- 绑定style --><div :style="{ color: textColor, fontSize: fontSize + 'px' }">动态样式</div><!-- 绑定多个属性（对象形式） --><button v-bind="attrs">提交</button>
</div>
点击查看代码
new Vue({el: '#app',data: {imageUrl: 'https://example.com/logo.png',imageDesc: '网站Logo',isActive: true,hasError: false,textColor: 'red',fontSize: 16,attrs: {disabled: true,type: 'button','data-id': 123}}
})
1.2 class绑定的多种方式
点击查看代码
<!-- 方式1：对象语法（推荐，可读性好） -->
<div :class="{ active: isActive, error: isError }">对象语法</div><!-- 方式2：数组语法 -->
<div :class="[activeClass, errorClass]">数组语法</div><!-- 方式3：数组+对象混合 -->
<div :class="[{ active: isActive }, errorClass]">混合语法</div><!-- 方式4：计算属性（推荐复杂场景） -->
<div :class="classObject">计算属性</div>
点击查看代码
computed: {classObject() {return {active: this.isActive && !this.isError,error: this.isError,'text-bold': this.isImportant}}
}
1.3 修饰符
点击查看代码
<!-- .prop修饰符：绑定DOM属性而非特性 -->
<button :disabled.prop="isDisabled">禁用按钮</button><!-- .camel修饰符：将kebab-case转为camelCase -->
<svg :view-box.camel="viewBox"></svg><!-- 没有修饰符时，v-bind绑定的是attribute -->
<input :value="username"> <!-- 绑定value特性 -->
二、v-for —— 列表渲染
v-for指令用于基于源数据多次渲染元素或模板。必须配合:key使用，以提高虚拟DOM的diff性能
2.1 基础用法
点击查看代码
<div id="app"><!-- 遍历数组 --><ul><li v-for="(item, index) in items" :key="index">{{ index }} - {{ item.name }}</li></ul><!-- 遍历对象 --><ul><li v-for="(value, key, index) in user" :key="key">{{ index }}. {{ key }}: {{ value }}</li></ul><!-- 遍历数字范围 --><span v-for="n in 10" :key="n">{{ n }}</span><!-- 遍历字符串 --><span v-for="char in 'Hello'" :key="char">{{ char }}</span>
</div>
点击查看代码
data: {items: [{ id: 1, name: '苹果' },{ id: 2, name: '香蕉' },{ id: 3, name: '橙子' }],user: {name: '张三',age: 25,email: 'zhangsan@example.com'}
}
2.2 状态维护与key的重要性
点击查看代码
<!-- 错误：使用index作为key（当列表会增删改时有问题） -->
<div v-for="(item, index) in list" :key="index">{{ item.name }}</div><!-- 正确：使用唯一且稳定的id -->
<div v-for="item in list" :key="item.id">{{ item.name }}</div><!-- 正确：没有id时使用完整对象（但会降低性能） -->
<div v-for="item in list" :key="JSON.stringify(item)">{{ item.name }}</div>
2.3 数组更新检测
Vue能检测到以下数组方法的变更：
- 变更方法（会改变原数组）：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
- 替换方法（返回新数组）：filter()、concat()、slice()
点击查看代码
methods: {// 变更方法：视图会更新addItem() {this.items.push({ id: Date.now(), name: '新项目' })},// 使用新数组替换：视图也会更新updateList() {this.items = this.items.filter(item => item.id !== this.deleteId)},// 错误 直接通过索引修改数组项：视图不会更新（Vue2限制）wrongUpdate() {this.items[0] = { id: 999, name: '修改后的值' } // 视图不更新！},//正确修改数组项的方式correctUpdate() {// 方式1：使用Vue.setthis.$set(this.items, 0, { id: 999, name: '修改后的值' })// 方式2：使用splicethis.items.splice(0, 1, { id: 999, name: '修改后的值' })}
}
2.4 v-for与v-if的优先级
在Vue2中，v-for优先级高于v-if，这意味着：
点击查看代码
<!-- 不推荐：v-for和v-if用在同一元素上 -->
<!-- 会先遍历整个列表，再过滤，性能较差 -->
<li v-for="user in users" v-if="user.isActive" :key="user.id">{{ user.name }}
</li><!-- 推荐：使用计算属性过滤 -->
<li v-for="user in activeUsers" :key="user.id">{{ user.name }}
</li>
点击查看代码
computed: {activeUsers() {return this.users.filter(user => user.isActive)}
}