Vue 条件渲染

v-if v-else 的用法，可使用变量，也可以使用 === 表达式

<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: 'a'
        }
    }
}
</script>

v-if 和 v-show 的区别？

v-if 只显示满足条件的一个
v-show 满足条件的显示，不满足条件的自动添加 display:none 样式进行隐藏

v-if 和 v-show 的使用场景？

更新频繁时，使用 v-show
只渲染一次时，使用 v-if

Vue 条件渲染 ​

Vue 条件渲染