本文主要是介绍前端框架vue3中的条件渲染（v-show,v-if,v-else-if,v-else），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
v-show:
需求：
v-if
区别与v-show：
v-if和v-show的选择：
v-else-if和v-else
联合使用：
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》出现，其他三个隐藏。
这篇关于前端框架vue3中的条件渲染（v-show,v-if,v-else-if,v-else）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
