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

标签: none

添加新评论