vue怎么控制元素的隐藏与显示

vue怎么控制元素的隐藏与显示,第1张

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()) 【变相隐藏,显示,结合动画实现炫酷效果】

【相关推荐:《vue.js教程》】

以上就是vue怎么控制元素的隐藏与显示的详细内容,

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/699264.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-23
下一篇 2022-04-23

发表评论

登录后才能评论

评论列表(0条)

保存