[Vue]条件渲染

  1.v-if
    写法:
        (1) v-if="表达式"
        (2) v-else-if="表达式"
        (3) v-else="表达式"
    适用于:切换频率较低的场景。
    特点: 不展示的DOM元素直接被移除。
    注意: v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”。
  2.v-show
    写法:  v-show="表达式"
    适用于: 切换频率较高的场景。
    特点: 不展示的DOM元素未被移除，仅仅是display:none 。
  3.备注: 使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
          template能配合v-if使用，不能配合v-show使用。
复制代码
<body>
    <div id="root">
        <h2>当前的n值是: {{n}}</h2>
        <button @click="n++">点我n+1</button>

        <!-- 使用v-show -->
        <div v-show='false'>你好1</div>
        <div v-show='1===1'>你好2</div>

        <!-- 使用v-if，中途不能被打断，v-else写的条件都无效 -->
        <div v-if="n===1">Vue</div>
        <div v-else-if="n===2">React</div>
        <div v-else-if="n===3">Angular</div>
        <div v-else="n===2">？？？</div>

        <!-- template可以配合v-if使用，不能配合v-show使用 -->
        <template v-if="n===1">
            <div>你</div>
            <div>好</div>
            <div>吗</div>
        </template>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#root",
        data: {
            n: 0,
            name: '条件渲染',
        },
    })
</script>
复制代码

 

posted @   夕苜19  阅读(6)  评论(0)  编辑  收藏  举报
相关博文：
· [Vue]列表渲染v-for
· [Vue]内置指令
· Vue条件渲染
· Vue 条件渲染
· 【Vue核心】11.条件渲染指令
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛