前端框架vue3中的条件渲染（v-show,v-if,v-else-if,v-else）

手搓二十四种设计模式

于 2024-09-01 15:24:00 发布

阅读量333

点赞数 3

文章标签：前端框架 vue.js javascript

本文链接：https://blog.csdn.net/m0_73892800/article/details/141784316

版权

v-show:

部分代码如图：

<body>
    <div id="root">
     <div ><h1>n的值为{{n}}</h1></div>
    </div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            n:"嘿嘿"
        }
    });
</script>

页面：

需求：

现在要隐藏这行文字，有很多中方法，此时在这里只需要加一个属性：

<div v-show="false"><h1>n的值为{{n}}</h1></div>

说明：

1.v-show里面的值为false文字隐藏，true文字显示。

2.当然它属性不只可以为true或false也可以是表达式，但也会根据ture和false判断，例如：

 <div v-show="x===1"><h1>n的值为{{n}}</h1></div>

v-if

说明：在使用上，和v-show一样，两者有一定区别

区别与v-show：

使用v-show检查后台时，发现结构并没有被破坏和隐藏，只是在页面上显示时隐藏了

可以看到浏览器给他加了一个display：none的样式将其隐藏，

v-if则不同：

可以看到它直接隐藏了变成了注释。

v-if和v-show的选择：

1.如果你页面上切换频繁就用v-show，因为v-if不断在结构上增删对效率有很大的影响

v-else-if和v-else

这种类似于流程控制if（）{}elseif{}else{}依次判断

联合使用：

例如：部分代码如下。

         <div v-if="n===1">显示文字1</div>
        <!-- 上面成立下面不在进行 -->
        <div v-else-if="n===2">显示文字2</div>
        <div v-else-if ="n===3">显示文字3</div>
        <!-- 最后一个不需要条件 -->
        <div v-else>显示文字4</div>

当n值为1，2，3，时《显示文字4》被隐藏，

当n值为除以上三个其他值时，《显示文字4》出现，其他三个隐藏。