Vue如何控制元素的隐藏与显示，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。vue控制元素隐藏与显示的方法：1、利用“v-if
Vue如何控制元素的隐藏与显示，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
vue控制元素隐藏与显示的方法：1、利用“v-if”和“v-else”指令来控制显隐；2、使用“v-show”指令，通过切换元素的CSS display属性来控制显隐；3、直接给元素设置display或opacity样式来控制显隐。
本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。
vue中控制元素的隐藏和显示的几种方法
1、v-if v-else 指令
2、v-show
<div v-show="showGroup">
<div class="fORMTitle">图层组</div >
</div >比如想要隐藏 上面这个div 那么给这个div加一个 v-show的属性。名字你随便起
然后再js代码中 设置 showGroup的默认值 为false，也就是刚启动的时候，默认是不显示的，后面如果想要显示这个div，那么可以直接设置vm.showGroup=true即可
3、display:none & opacity：0【通过属性绑定还是 ref获取到dom元素在设置display:none 或者 设置透明度即可】 && 把元素移到文档可视区之外（transform:translate()） 【变相隐藏，显示，结合动画实现炫酷效果】
看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注编程网JavaScript频道，感谢您对编程网的支持。
--结束END--
本文标题: vue如何控制元素的隐藏与显示
本文链接: https://www.lsjlt.com/news/88090.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0