vue 中 v-if 和 v-show 指令的共同点与不同点

vue 中 v-if 和 v-show 指令的共同点与不同点

共同点：

都可以用来控制元素的显示与隐藏

不同点：

v-if 指令是通过动态的删除或者添加 DOM 元素，来控制元素的显示与隐藏，比较消耗性能，如果元素不是经常显示隐藏切换，可以考虑用 v-if 。
v-show 指令是通过控制 css 样式中的 display: none/display: block，来控制元素显示与隐藏，适用于频繁显示隐藏切换的场景

v-if

<template>
    <div>
        <div v-if="show" class="v-if">v-if</div>
        <div v-else class="v-else">v-else</div>
        <!-- true 显示，false 隐藏 -->
    </div>
</template>
<script>
    export default {
        data() {
            return {
                show: false
            }
        }
    }
</script>

v-show

<template>
    <div>
        <div v-show="show" class="v-show">v-show</div>
        <!-- true 显示，false 隐藏 -->
    </div>
</template>
<script>
    export default {
        data() {
            return {
                show: false
            }
        }
    }
</script>