目录
- [Vue 2 条件渲染详解](#Vue 2 条件渲染详解)
- [Vue 2 列表渲染详解](#Vue 2 列表渲染详解)
-
- [`v-for` 指令](#
v-for指令) - 计算属性和方法
- `v-bind:key`
- 使用对象的`v-for`
- [`v-for` 的索引](#
v-for的索引)
- [`v-for` 指令](#
👍 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！
Vue 2 条件渲染详解
条件渲染是Vue.js 2中一个重要的概念，它允许你根据特定的条件来决定是否渲染或显示某个DOM元素。这是构建动态和交互性用户界面的关键部分。以下是对Vue 2条件渲染的多方面详细介绍，包括使用详细的项目实例。
v-if 和 v-else 指令
v-if 和 v-else 指令是用于条件渲染的核心指令。它们允许你根据给定的条件来显示或隐藏元素。
项目示例
假设你有一个简单的任务清单应用，你希望根据是否存在任务来显示不同的提示信息。你可以使用v-if 和 v-else 来实现这一目标。
html
<div id="app">
<h1>任务清单</h1>
<div v-if="tasks.length > 0">
<h2>任务列表：</h2>
<ul>
<li v-for="task in tasks">{{ task }}</li>
</ul>
</div>
<div v-else>
<p>暂无任务。</p>
</div>
</div>
javascript
new Vue({
el: '#app',
data: {
tasks: ['任务1', '任务2', '任务3'],
},
});在这个示例中，根据tasks 数组是否为空，你可以决定是否渲染任务列表或者显示"暂无任务"的提示。
v-show 指令
v-show 指令类似于v-if，但它不是真正的条件渲染，而是使用CSS的display属性来隐藏或显示元素。如果你需要频繁切换元素的可见性，v-show可能更适合。
项目示例
继续上面的任务清单应用示例，你可以使用v-show 来切换任务列表的可见性。
html
<div v-show="tasks.length > 0">
<h2>任务列表：</h2>
<ul>
<li v-for="task in tasks">{{ task }}</li>
</ul>
</div>在这个示例中，当tasks 数组不为空时，任务列表会显示；当tasks 数组为空时，任务列表会被隐藏，但DOM元素仍然存在。
v-if 和 v-show 的区别
v-if：在条件为假时，元素不会存在于DOM中，因此它对性能有较好的优化。但频繁切换时可能会有一些性能开销。v-show：元素始终存在于DOM中，只是使用CSS的display属性来控制可见性。这在频繁切换时可能更快，但可能会有轻微的性能开销。
你可以根据你的需求和性能优化考虑选择使用v-if还是v-show。
v-if 和 v-else-if 指令
除了v-if 和 v-else，Vue 2还提供了v-else-if 用于多条件渲染。这在你有多个条件要满足时非常有用。
项目示例
假设你的任务清单应用有三个状态：进行中、已完成和已取消。你可以使用v-else-if 来渲染不同状态的任务。
html
<div v-if="status === 'inProgress'">
<h2>进行中的任务：</h2>
<ul>
<li v-for="task in inProgressTasks">{{ task }}</li>
</ul>
</div>
<div v-else-if="status === 'completed'">
<h2>已完成的任务：</h2>
<ul>
<li v-for="task in completedTasks">{{ task }}</li>
</ul>
</div>
<div v-else>
<h2>已取消的任务：</h2>
<ul>
<li v-for="task in canceledTasks">{{ task }}</li>
</ul>
</div>在这个示例中，根据status 的值，你可以决定渲染不同状态的任务列表。
条件渲染是Vue 2的强大功能，它使你可以根据数据的变化来控制元素的显示和隐藏，以实现动态和交互性的用户界面。
Vue 2 列表渲染详解
列表渲染是Vue.js 2中一个强大的功能，它允许你轻松地渲染数据列表到DOM中。Vue提供了多种指令和方法来实现列表渲染，包括v-for指令、计算属性和方法。以下是对Vue 2列表渲染的多方面详细介绍，包括使用详细的项目实例。
v-for 指令
v-for 指令是Vue中用于循环渲染元素的核心指令。它允许你在模板中基于数据数组或对象的每个项来重复渲染元素。
项目示例
假设你有一个任务清单应用，你可以使用v-for 来渲染任务列表。
html
<div id="app">
<h1>任务清单</h1>
<ul>
<li v-for="task in tasks">{{ task }}</li>
</ul>
</div>
javascript
new Vue({
el: '#app',
data: {
tasks: ['任务1', '任务2', '任务3'],
},
});在这个示例中，v-for 指令循环遍历tasks 数组中的每个任务，并将它们渲染成列表项。
计算属性和方法
除了v-for，你还可以使用计算属性和方法来进行列表渲染。这对于复杂的列表操作非常有用。
项目示例
假设你有一个包含任务的数组，并希望渲染已完成的任务的数量。
html
<div id="app">
<h1>任务清单</h1>
<ul>
<li v-for="task in completedTasks">{{ task }}</li>
</ul>
<p>已完成任务数：{{ completedTaskCount }}</p>
</div>
javascript
new Vue({
el: '#app',
data: {
tasks: [
{ text: '任务1', completed: true },
{ text: '任务2', completed: false },
{ text: '任务3', completed: true },
],
},
computed: {
completedTasks: function() {
return this.tasks.filter(task => task.completed);
},
completedTaskCount: function() {
return this.completedTasks.length;
},
},
});在这个示例中，completedTasks 计算属性用于过滤已完成的任务，并将它们渲染成列表项。completedTaskCount 计算属性用于计算已完成任务的数量。
v-bind:key
在使用v-for 进行列表渲染时，你应该为每个渲染的元素提供一个唯一的key 属性。这有助于Vue更有效地管理DOM元素。
项目示例
html
<div id="app">
<ul>
<li v-for="task in tasks" v-bind:key="task.id">{{ task.text }}</li>
</ul>
</div>在这个示例中，v-bind:key 用于为每个任务列表项提供一个唯一的标识，通常使用任务的ID。
使用对象的v-for
除了数组，你还可以使用对象进行v-for 进行列表渲染。
项目示例
假设你有一个包含任务的对象，每个任务都有一个唯一的键。
html
<div id="app">
<ul>
<li v-for="(task, key) in tasks" v-bind:key="key">{{ task }}</li>
</ul>
</div>
javascript
new Vue({
el: '#app',
data: {
tasks: {
task1: '任务1',
task2: '任务2',
task3: '任务3',
},
},
});在这个示例中，v-for 用于遍历任务对象，key 作为任务的唯一标识。
v-for 的索引
除了元素值，v-for 还可以提供索引值。
项目示例
html
<div id="app">
<ul>
<li v-for="(task, index) in tasks" v-bind:key="index">{{ task }}</li>
</ul>
</div>在这个示例中，index 是任务在数组中的索引值。
列表渲染是Vue 2的一个强大特性，它使你可以轻松地渲染数据列表，无论是使用v-for指令、计算属性还是方法，都提供了多种方式来满足不同的需求。这使得Vue成为一个出色的前端框架，用于构建动态和交互性的用户界面。