Vue条件渲染v-if，v-show和列表渲染v-for

条件渲染分别是通过v-if和v-show来完成的，二者相似但又有一点小小的区别，这两条指令的语法和JavaScript的if语句以及for循环有相似之处，

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。即匹配到相应的值才会被渲染

例如：新建一个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-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