说一说 v-if 和 v-show区别？

得分点

v-show true/false都渲染 、 v-if true渲染 false不渲染

参考答案

标准回答

作用: 都是控制元素隐藏和显示的指令

区别：

• v-show: 控制的元素无论是true还是false，都被渲染出来了，通过display：none控制元素隐藏
• v-if: 控制的元素是true，进行渲染，如果是false不渲染，根本在dom树结构中不显示

加分回答

应用：

• v-show: 适合使用在切换频繁显示/隐藏的元素上
• v-if: 适合使用在切换不频繁，且元素内容很多，渲染一次性能消耗很大的元素上

延伸阅读

实例

<template>
    <div>
        <p v-if="type === 'a'">A</p>
        <p v-else-if="type === 'b'">B</p>
        <p v-else>other</p>

        <p v-show="type === 'a'">A by v-show</p>
        <p v-show="type === 'b'">B by v-show</p>

    </div>
</template>

<script>
export default {
    data() {
        return {
            type: 'b',          
        }
    }
}
</script>

浏览器中渲染后最终展示的结构