学习目录：
- Vue.js 简介
- Vue.js 实例与数据绑定
- Vue.js 计算属性和侦听器
- Vue.js 条件渲染和列表渲染
- Vue.js 事件处理
- Vue.js 表单输入绑定
- Vue.js 组件基础
- Vue.js 组件通信
- Vue.js 插槽
- Vue.js 动态组件和异步组件
- Vue.js 自定义指令
- Vue.js 过渡和动画
- Vue.js 混入
- Vue.js 自定义事件和 v-model
- Vue.js 渲染函数和 JSX
- Vue.js 插件
- Vue.js 单文件组件
- Vue.js Webpack 配置和打包优化
- Vue.js Vue Router
- Vue.js Vuex
- Vue.js 服务端渲染
- Vue.js 代码测试和调试
- Vue.js 生态系统
- Vue.js 最佳实践和性能优化
- Vue.js 应用部署和上线
条件渲染
v-if 指令
Vue.js 中的条件渲染主要通过 v-if 指令来实现。v-if 指令可以绑定到一个表达式上，根据该表达式的值来决定是否渲染元素。例如：
<div v-if="showMessage">
{{ message }}
</div>在上面的示例中，v-if 指令绑定到 showMessage 变量上，当 showMessage 的值为 true 时，<div> 元素会被渲染出来，并显示变量 message 的值。当 showMessage 的值为 false 时，<div> 元素不会被渲染出来。
注意，v-if 指令会根据表达式的值来销毁或重建 DOM 元素，因此当条件频繁切换时，性能可能会受到影响。如果需要频繁切换条件，可以考虑使用 v-show 指令，该指令会简单地切换元素的 display CSS 属性，而不是销毁和重建 DOM 元素。
v-else 指令
除了 v-if 指令外，Vue.js 还提供了 v-else 指令，可以在 v-if 指令的后面紧跟着使用，例如：
<div v-if="showMessage">
{{ message }}
</div>
<div v-else>
没有消息
</div>在上面的示例中，如果 showMessage 的值为 true，第一个 <div> 元素会被渲染出来，并显示变量 message 的值。如果 showMessage 的值为 false，第二个 <div> 元素会被渲染出来，并显示文本 没有消息。
v-else-if 指令
除了 v-if 和 v-else 指令外，Vue.js 还提供了 v-else-if 指令，可以在 v-if 指令后面，v-else 指令前面使用，例如：
<div v-if="score >= 90">
优秀
</div>
<div v-else-if="score >= 60">
及格
</div>
<div v-else>
不及格
</div>在上面的示例中，如果 score 的值大于或等于 90，第一个 <div> 元素会被渲染出来，并显示文本 优秀。如果 score 的值大于或等于 60，但小于 90，第二个 <div> 元素会被渲染出来，并显示文本 及格。如果 score 的值小于 60，第三个 <div> 元素会被渲染出来，并显示文本 不及格。
列表渲染
v-for 指令
Vue.js 中的列表渲染主要通过 v-for 指令来实现。v-for 指令可以绑定到一个数组或对象上，根据其元素或属性的值来生成列表中的元素。例如：
<ul>
<li v-for="item in items">
{{ item }}
</li>
</ul>在上面的示例中，v-for 指令绑定到 items 数组上，根据该数组中的元素生成一组 <li> 元素，每个 <li> 元素显示数组中对应的元素的值。
v-for 和索引
在列表渲染时，有时需要访问当前元素在列表中的索引值。可以使用v-for 指令的第二个参数来获取当前元素的索引值。例如：
<ul>
<li v-for="(item, index) in items">
{{ index }}. {{ item }}
</li>
</ul>在上面的示例中，v-for 指令绑定到 items 数组上，并使用 (item, index) 的形式来同时获取当前元素的值和索引值。每个 <li> 元素显示当前元素在列表中的索引值和对应的元素的值。
v-for 和对象
除了数组外，Vue.js 中的 v-for 指令还可以遍历对象。例如：
<ul>
<li v-for="(value, key) in object">
{{ key }}: {{ value }}
</li>
</ul>在上面的示例中，v-for 指令绑定到 object 对象上，并使用 (value, key) 的形式来同时获取当前属性的值和属性名。每个 <li> 元素显示当前属性名和对应的属性值。
v-for 和范围
除了数组和对象外，Vue.js 中的 v-for 指令还可以遍历数字范围。例如：
<div v-for="i in 5">
{{ i }}
</div>在上面的示例中，v-for 指令绑定到数字 5 上，生成一组 <div> 元素，每个 <div> 元素显示当前数字。
示例代码
下面是一个完整的示例代码，其中包含了条件渲染和列表渲染的用法：
<!DOCTYPE html>
<html>
<head>
<title>Vue.js 条件渲染和列表渲染示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="showTitle">Hello, World!</h1>
<div v-else>
<p>没有标题</p>
</div>
<ul>
<li v-for="(item, index) in items">
{{ index }}. {{ item }}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
showTitle: true,
items: ['Apple', 'Banana', 'Cherry']
}
})
</script>
</body>
</html>在上面的示例代码中，我们定义了一个名为 app 的 Vue.js 实例，并在其 data 属性中定义了 showTitle 和 items 两个变量。showTitle 变量用于控制是否显示标题，items 变量用于存储一个数组，供列表渲染使用。
在 HTML 中，我们使用 v-if 指令来根据 showTitle 变量的值来显示或隐藏标题。使用 v-else 指令来显示文本 没有标题。使用 v-for 指令来遍历 items 数组，并使用 (item, index) 变量来生成列表项。最终的效果如下图所示：
总结
在本文中，我们详细介绍了 Vue.js 中的条件渲染和列表渲染，包括其实现方式、用法和示例代码。通过 v-if 和 v-for 指令，我们可以轻松地实现动态显示或隐藏元素和动态生成列表。这些功能在构建交互式 Web 应用程序时非常有用，因此建议开发者熟练掌握它们的使用。
