Vue.js 是目前最受欢迎的前端框架之一,其灵活的设计和强大的功能使得开发者能够高效地构建复杂的用户界面。条件渲染和列表渲染是 Vue.js 中两个重要的概念,掌握它们将大大提升你在开发过程中的效率和代码质量。本文将详细介绍 Vue 中条件渲染和列表渲染的使用技巧,并通过几个具体的应用案例展示其实际运用。
一、条件渲染
条件渲染是指根据条件动态地显示或隐藏元素。Vue 提供了两个主要指令来实现条件渲染:v-if 和 v-show。
1. 使用v-if
v-if 指令用于在条件为真时渲染模板块,否则不渲染。Vue 会在条件为假时销毁这些元素,而不是简单地隐藏它们。
<template>
<div>
<button @click="toggle">Toggle</button>
<p v-if="isVisible">这个段落会根据条件显示或隐藏。</p>
</div></template><script>export default {
data() { return { isVisible: true,
};
}, methods: {
toggle() { this.isVisible = !this.isVisible;
},
},
};</script>2. 使用v-show
v-show 也用于条件渲染,但不同之处在于,无论条件真假,元素总是会被渲染并保留在 DOM 中,只是通过 CSS 属性 display 来控制显隐。
<template>
<div>
<button @click="toggle">Toggle</button>
<p v-show="isVisible">这个段落会根据条件显示或隐藏。</p>
</div></template><script>export default {
data() { return { isVisible: true,
};
}, methods: {
toggle() { this.isVisible = !this.isVisible;
},
},
};</script>3.v-if与v-show的选择
当一个元素需要频繁切换显隐状态时,v-show 性能更好,因为它只是简单地切换 CSS 属性。
当一个元素只需要一次性条件渲染时,v-if 更合适,因为它不会渲染和销毁未被显示的部分。
二、列表渲染
列表渲染用于基于一个数据数组生成一组元素。Vue 提供了 v-for 指令来实现列表渲染。
1. 基本用法
v-for 指令用于遍历数组或对象,并渲染出相应的列表项。
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
</div></template><script>export default {
data() { return { items: [
{ id: 1, text: '第一个项目' },
{ id: 2, text: '第二个项目' },
{ id: 3, text: '第三个项目' },
],
};
},
};</script>2. 迭代对象
v-for 不仅可以迭代数组,还可以迭代对象的属性。
<template>
<div>
<ul>
<li v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</li>
</ul>
</div></template><script>export default {
data() { return { object: { name: '张三', age: 30, city: '上海',
},
};
},
};</script>3. 使用索引
在使用 v-for 遍历数组时,可以添加第二个参数(索引)以访问当前项的索引。
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="item.id">{{ index }}: {{ item.text }}</li>
</ul>
</div></template><script>export default {
data() { return { items: [
{ id: 1, text: '第一个项目' },
{ id: 2, text: '第二个项目' },
{ id: 3, text: '第三个项目' },
],
};
},
};</script>三、应用案例
为了让你更好地理解这些概念,我们将通过一些具体的应用案例来展示条件渲染和列表渲染的实际用途
案例1:待办事项列表
需求:实现一个简易的待办事项列表,用户可以添加新事项、标记事项为完成或未完成,并可删除事项。
<template>
<div>
<h1>待办事项列表</h1>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入待办事项并按回车">
<ul>
<li v-for="todo in todos" :key="todo.id">
<input type="checkbox" v-model="todo.completed">
<span :class="{ done: todo.completed }">{{ todo.text }}</span>
<button @click="removeTodo(todo.id)">删除</button>
</li>
</ul>
</div></template><script>export default {
data() { return { newTodo: "", todos: [
{ id: 1, text: "学习Vue", completed: false },
{ id: 2, text: "写一个小项目", completed: false },
],
};
}, methods: {
addTodo() { if (this.newTodo.trim()) { this.todos.push({ id: this.todos.length + 1, text: this.newTodo.trim(), completed: false,
}); this.newTodo = "";
}
},
removeTodo(id) { this.todos = this.todos.filter(todo => todo.id !== id);
},
},
};</script><style scoped>.done { text-decoration: line-through;
}</style>案例2:商品列表与条件筛选
需求:实现一个商品列表,可以根据商品的库存情况进行筛选。
<template>
<div>
<h1>商品列表</h1>
<label>
<input type="checkbox" v-model="showInStockOnly"> 仅显示有库存的商品 </label>
<ul>
<li v-for="product in filteredProducts" :key="product.id">
<span>{{ product.name }}</span>
<span v-if="product.stock > 0">库存:{{ product.stock }}</span>
<span v-else class="out-of-stock">已售完</span>
</li>
</ul>
</div></template><script>export default {
data() { return { showInStockOnly: false, products: [
{ id: 1, name: "商品A", stock: 10 },
{ id: 2, name: "商品B", stock: 0 },
{ id: 3, name: "商品C", stock: 5 },
],
};
}, computed: {
filteredProducts() { return this.showInStockOnly
? this.products.filter(product => product.stock > 0)
: this.products;
},
},
};</script><style scoped>.out-of-stock { color: red;
}</style>总结
通过上述介绍和案例演示,我们详细讲解了 Vue 框架中条件渲染和列表渲染的使用方法。掌握这些技巧,你不仅能提高开发效率,还能更好地处理复杂的逻辑和数据展示需求。希望本文对你在学习和使用 Vue 框架的过程中有所帮助,祝你在前端开发的道路上不断进步!
来源：
互联网
本文观点不代表源码解析立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表