vue 控制元素的显示和隐藏

Posted 2023-04-02 是江流儿呀

 方法：

1. 使用 v-if 指令，通过动态的向DOM树内添加或者删除DOM元素的方式来显示或隐藏元素；
2. 使用 v-show 指令，通过设置DOM元素的display样式属性来控制显隐。

v-if 指令与 v-show 指令都可以根据值动态控制DOM元素显示隐藏，

v-if 和 v-show 属于Vue的内部常用的指令，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。

• v-if 会直接删除元素
• v-show 只是隐藏，只是简单地切换元素的 CSS 属性display。

v-show 示例： 

比如想要 隐藏 下面这个 按钮 那么给这个 div 加一个 v-show 的属性，名字我写的showButton， 

<div v-show="showButton">
      <Button>按钮</Button>
</div>

然后在 js 代码中 设置 showButton 的默认值为 false ，就是刚启动的时候，默认是不显示的，

后面如果想要 显示 这个 按钮 ，就直接设置 showButton 为 true 就好了

 

react中控制元素的显示与隐藏

参考技术A 最近在做 react 的项目，在此之前，都是做的 vue 项目，所以对于 react 的使用都很不熟练。遇到的第一个问题，怎么控制元素的显示与隐藏，在 vue 中常用 v-if 和 v-show 指令。 react 中用什么方法呢？

下面说我知道的三种方法：

类似于 vue 的 v-if

方法是通过变量来控制是否加载元素的，如果变量为 false ，内容就直接不会渲染的。

类似于 vue 中的 v-show

通过 display 属性来控制元素显示与隐藏

通过 className 切换类名来实现元素的显示和隐藏。

第一种方法不适合频繁控制显示隐藏的情况，因为它会重新渲染元素，比较耗费性能。