Vue条件渲染v-if，v-show和列表渲染v-for
条件渲染主要以v-if和v-show两种指令实现，在一定程度上其功能与JavaScript中的if语句及for循环具有类似的结构但也存在细微的区别
该指令基于特定条件执行内容显示。该内容仅在指令表达式的评估结果为真时才会呈现。即只有符合对应值的情况才会触发显示。
例如：新建一个Vue实例：
new Vue({
el: '#app',
data() {
return {
age: 12,
type: 'D'
}
}
}) <div id="app">
<!-- 放在单个标签上 -->
<h1 v-if="age>=18">成年人</h1>
<h1 v-else>未成年人</h1>
</div>与JS中的if判断语句语法结构相似，在满足特定条件下会显示对应的页面内容；此外还可以利用v-else-if来处理多于一个的筛选条件，在实际应用中可以采用以下方式实现：
<div id="app">
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
</div>最后输出的页面内容为：Not A/B/C
另一个条件渲染是 v-show 指令。用法大致一样：
<h1 v-show="age>=18">成年人</h1>注意：
v-if****和v-show的区别 ：
V-IF 作为一种高级的条件渲染机制，在切换前后能够负责管理其所在的环境以及内部的所有事件监听器与子组件之间的生命周期变化。**具体实现上，则是通过动态地移除相关标签以及重新创建所需的组件标签来完成显示与隐藏的操作。**这种实现方式的优势在于：当不满足特定条件时会主动删除相关的标记元素，并且这包括与这些标记相关的事件监听器等组件等操作；这种设计不仅能够有效地释放资源以减少内存占用还能进一步提升系统的性能表现。
v-if 也是惰性的 ：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。只是通过给标签添加display:block/show来进行显隐式的条件渲染，本身是还在的。
通常情况下，在频繁切换场景下建议采用v-show以降低启动渲染开销；而在运行时条件变化较少的情况下，则推荐使用v-if以减少切换频率带来的性能消耗
列表渲染 v-for：
该指令允许我们在数组中渲染列表；该指令采用 item 在 items 格式的特殊语法结构；其中 items 代表源数据数组；而 item 则是被迭代的对象
演示遍历数组：
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul> var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}结果输出如下
Vue 对被捕获的数组的变化方法进行了封装处理；具体而言，则涵盖了多种具体的实现方式。
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
你可以访问控制台界面，并对前面提供的例子中的 items 数组进行操作，请先尝试执行变更方法。例如，在example1中进行如下操作：在items数组中添加一个新的对象 {message: 'Baz'}。
此外还可以不仅除了列表渲染之外，并非只能遍历数组；同样地在这种情况下还可以遍历对象
语法1: v-for="item in arr"
== item就是循环到的那个数组元素
== arr就是要循环的数组
语法2: v-for = "(item,index) in arr"
== item就是循环到的那个数组元素
== arr就是要循环的数组
== index就是循环到的数组元素的下标遍历对象语法如下：
语法3: v-for="val in obj"
== obj就是要循环的那个数组
== val就是循环到的键值对的值
语法4: v-for="(val,key)in obj"
== obj就是要循环的那个数组
== val就是循环到的键值对的值
== key就是循环到的键值对的键名
语法5: v-for="(val,key,index)in obj"
== obj就是要循环的那个数组
== val就是循环到的键值对的值
== key就是循环到的键值对的键名
== index就是循环到的键值对的索引，在各个浏览器里面可能表现不同通常我们不推荐 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级