Vue-006 v-if的使用以及和v-show的区别

一、v-if的使用

v-if可以控制Dom显示和隐藏，当值为true时就显示，false时就隐藏

div

    <h2 v-if="true">v-if=“true”</h2>
    <h2 v-if="false">v-if=“false”</h2>

显示效果

只有第一行显示，第二行就隐藏了。

使用的时候， 一般把true和false写成一个变量放到data中，然后再加个按钮来控制变量的boolean值

div

    <button @click="btn">按钮</button>
    <h2 v-if="isShow">v-if为true</h2>

data和methods

        data:{
            isShow:true
        },
        methods:{
            btn(){
                this.isShow=!this.isShow;
            }
        }

运行效果

这样加起来也可以算是一个小例子了

二、v-if和v-else一起使用

v-if和v-else放在一起的时候，v-else后面就不用再写表达式

v-if为真的时候显示v-if，不显示v-else

v-if为假的时候不显示v-if，显示v-else

来个例子，div

    <button @click="btn">按钮</button>
    <h2 v-if="isShow">v-if为true</h2>
    <h2 v-else>我是v-else</h2>

data和methods不变，和上面的一样

        data:{
            isShow:true
        },
        methods:{
            btn(){
                this.isShow=!this.isShow;
            }
        }

运行效果

三、v-if,v-else,v-else-if

这三个放在一起的时候很少，如果有这样的情况，一般也就写成一个方法来代替了

要写的话是这样子的

div

    <h2 v-pre>v-pre，不做解析直接显示代码</h2>
    <h2 v-if="score>=90 & score<=100">优秀</h2>
    <h2 v-else-if="score>=70">良好</h2>
    <h2 v-else-if="score>=60">及格</h2>
    <h2 v-else>不及格</h2>

四、v-if和v-show的区别

v-if和v-show都控制显示和隐藏，效果看起来差不多，但是原理不一样。

先看例子

div

    <h2 v-if="false">我是v-if</h2>
    <h2 v-show="false">我是v-show</h2>

运行效果

v-if让整个<h2>隐藏了，控制整个Dom比较耗时，所以如果要频繁切换的话就不用v-if了

v-show只是给<h2>加上了CSS语句

总结：两者效果一样，v-show省时省性能，频繁切换的话就用v-show