vue隐藏元素的方法(vue控件的隐藏和显示)

vue中通过什么指令控制元素显示隐藏？可以是用v-if v-else 或者v-show指令控制元素显示隐藏，vue隐藏元素的方法有哪些呢？如下5种方法，本文讲解vue控件的隐藏和显示。

方法1、v-if v-else 指令 

方法2、v-show

方法3、display:none & opacity：0

通过属性绑定还是 ref获取到dom元素在设置display:none 或者 设置透明度即可

把元素移到文档可视区之外（transform:translate()） 变相隐藏，显示，结合动画实现炫酷效果

方法4、路由 meta

 定义路由时，就可以在路由对象中设置 meta属性，meta:{showdom:true}, 然后使用 v-show=“”$route.meta.showdom“” 就可以控制元素的隐藏和显示了

方法5、<!-- 使用vue  提供的 component标签  :is=" 组件名称 " 提供那个就展示那个 -->

<component :is="componentname">
  <!-- 绑定一个变量，变量指向那个组件就展示那个组件， -->
</component>