vue如何控制元素的隐藏与显示-成都快上网建站

vue如何控制元素的隐藏与显示

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  那么给这个div加一个  v-show的属性。名字你随便起

然后再js代码中  设置 showGroup的默认值 为false,也就是刚启动的时候,默认是不显示的,后面如果想要显示这个div,那么可以直接设置vm.showGroup=true即可

vue如何控制元素的隐藏与显示

3、display:none & opacity:0【通过属性绑定还是 ref获取到dom元素在设置display:none 或者 设置透明度即可】 && 把元素移到文档可视区之外(transform:translate()) 【变相隐藏,显示,结合动画实现炫酷效果】

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。


分享名称:vue如何控制元素的隐藏与显示
分享URL:http://kswjz.com/article/gcpjcp.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流