vue中的v-show和v-if

一、v-show和v-if的共同点

v-show和v-if都能达到让页面元素是否显示的效果，控制标签的显示和隐藏。

<p v-show="表达式">内容</p>

<p v-if="表达式">内容</p>

当表达式的值为true时，页面元素显示，反之， 为false时则不显示。

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

控制方式不同：v-show是通过给该元素添加display：none的css属性，该元素还在，只是隐藏了，而v-if显示或者隐藏是通过删除该元素或者增加该元素的方式。

性能消耗：v-if切换的效率更高，v-if有更高的初始渲染消耗。

三、v-show和v-if的使用场景

v-if 与 v-show 都能控制 dom 元素在页面的显示， v-if 相比 v-show 开销更大的（直接操作 dom 节点增加与删除）， 如果需要非常频繁地切换，则使用 v-show 较好 如果在运行时条件很少改变，则使用 v-if 较好。

v-if也可以和v-else一起使用：

<template>
<div>
    <!-- 、
        v-show 或者 v-if
        v-show="vue变量"
        v-if="vue变量"
    -->
    <h1 v-show="isShow">我是h1</h1>
    <h2 v-if="isOk">我是h2</h2>
    <!-- 
        v-show隐藏: 采用display:none   // 频繁切换
        v-if隐藏:   采用从DOM树直接移除 // 移除
    -->

    <!-- v-if和v-else使用 -->
    <p v-if="age >= 18">成年了</p>
    <p v-else>未成年</p>
</div>
</template>

<script>
    export default {
        data(){
            return {
                isShow: true,
                isOk: true,
                age: 2
            }
        }
    }
</script>