十二、Vue条件渲染:v-if与v-show条件判断

程序离不开条件判断，作为一个优秀的前端框架，Vue提供了判断指令，v-if、v-else-if、v-else、v-show。v-if可以单独使用也可以配合v-else-if与v-else使用。

v-if的使用

先来看一个使用v-if的单独案例

<div id="app">
    <!--b-if单独使用-->
    <p v-if="pisTrue">我显示与否，在于你是否为真</p>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            // 值为true时，p显示，为false时，p不显示
            pisTrue:true,
        }
    });
</script>

这个案例一下了就看明白了，只有pisTrue为true时，p标签的内容才会被显示出来。

<div id="app">
    <!--v-if配置v-else使用-->
    <span v-if="sisTrue">hello vue</span>
    <span v-else>hello php</span>
    <br>

    <!--综合使用-->
    分数：<input type="text" v-model="score"><br>
    <div v-if="score >= 90">优秀</div>
    <div v-else-if="score >= 80">良好</div>
    <div v-else-if="score >= 60">及格</div>
    <div v-else="score >= 0">不及格</div>
    
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            // 值为true时，显示hello vue,为false时，显示 hello php
            sisTrue:false,
            score:''
        }
    });
</script>

v-show的使用

v-show与v-if类型，不同的是带有v-show的标签元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。注意，v-show 不支持 <template> 元素，也不支持 v-else。

<div id="app">
    <button @click="clikeme">点击我就会隐藏下面的内容</button>
    <div v-show="isShow">我只被隐藏了，我还在这里</div>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{,
            isShow:true
        },
        methods:{
            clikeme(){
                this.isShow = !this.isShow
            }
        }
    });
</script>

v-if与v-show该使用谁，来自于官方的答案

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。官方不推荐v-if与v-for同时使用。

2020-11-02