Vue指令篇_v-if、v-else、v-else-if

目录

1.v-if

2.v-else

 3.v-else-if

4.v-show

5.v-if 和 v-show 比较

---

1.v-if

作用：条件性的渲染一块内容，这块内容只会在指令的表达式为真值时被渲染。

<div id="app">
    <div v-if=true>姓名：{{ stu1.name }}</div> //渲染
    <div v-if=false>年龄：{{ stu1.age }}</div> //不渲染
    <div>姓名：{{ stu2.name }}</div>
    <div>年龄：{{ stu1.age }}</div>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        stu1: {
            name: "JWH",
            age: 18
        },
        stu2: {
            name: "DQS",
            age: 18
        }
    }
})

【结果】stu1.age不渲染

【注】若想切换多个元素，则可以将其包裹在不可见元素 <template> 中，并在 <template> 元素上使用 v-if ，如下例：

<template v-if=true>
    <div>姓名：{{ stu1.name }}</div>
    <div>年龄：{{ stu1.age }}</div>
</template>
<template v-if=false>
    <div>姓名：{{ stu2.name }}</div>
    <div>年龄：{{ stu2.age }}</div>
</template>

【结果】

2.v-else

作用：为 v-if 或者 v-esle-if 添加 else 块，其前一兄弟元素必须有 v-if 或 v-else-if，举个例子

<template v-if=false>
    <div>姓名：{{ stu1.name }}</div>
    <div>年龄：{{ stu1.age }}</div>
</template>
<template v-else>
    <div>姓名：{{ stu2.name }}</div>
    <div>年龄：{{ stu2.age }}</div>
</template>

【结果】

 3.v-else-if

作用：为 v-if 添加 else if 块，可以链式调用，前一兄弟元素必须有 v-if 或 v-else-if

<div id="app">
    <div v-if="chose.A">{{ stu1.name }}</div>
    <div v-else-if="chose.B">{{ stu2.name }}</div>
    <div v-else="choseC.">{{ stu2.age }}</div>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        stu1: {
            name: "JWH",
            age: 18
        },
        stu2: {
            name: "DQS",
            age: 18
        },
        chose:{
            A:false,
            B:true,
            C:true
        }
    }
})

 【结果】

4.v-show

作用：根据表达式之真价值，切换元素的 display CSS 属性，举个栗子

<div v-show=2>你就是最好的</div>
<div v-show=0>You are the best</div>

【结果】可以看到第二行代码的 display 属性值为 none

5.v-if 和 v-show 比较

1. v-if 是惰性的，如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时才会开始渲染条件块；v-show 则不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换
2. v-if 有更高的切换开销，v-show 有更高的初始渲染开销，如果需要非常频繁地切换，则使用 v-show 较好，如果运行时条件很少改变，则使用 v-if 较好
3. v-show 不支持<template> 元素
4. v-show 不支持 v-else / v-else-if