目录
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）
发表评论 取消回复