Vue3 _ 4. Vue 条件渲染

我们在之前学习 Java 的时候就有学过条件语句，同样，Vue 给我们也提供了几种条件渲染的属性标签，来学习一下。

一、v-if

打开官网的地址：https://v3.cn.vuejs.org/guide/conditional.html#%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93

这个 v-if 可以作用在很多的标签上，好比 h1、p、div 等等标签，v-if 会根据指令的表达式来进行判断，是否显示。来看一个例子。

效果：

当然，这个是最简单的例子。

我们除去直接写 true 或者 false 之外，我们还可以进行绑定参数，通过改变参数来进行控制是否显示。

再来看一下效果：

除去这个 v-if，和它配合的还有一个，叫 v-else，来看一下。

但是，我们要知道这么一件事，这个 v-else 是不绑定值的，它会跟最邻近的一个 v-if 作为一对来进行使用。什么意思呢？来看例子

我们将 v-else 所在的 h1 标签向下移动了一行，但是我们可以发现，就不显示了，因为它现在是和上面绑定 isShow2 的是一对。

除去 v-else，还有一个哥们是 v-else-if，和 v-else 不同的是，v-else-if 后面还可以带条件。

（v-else 也可以跟在 v-else-if 后面，但是没有办法单独使用）

当然，我们也可以把这个绑定在 template 或者 div 上，这样就可以做到一大堆的东西显示或者不显示。

二、v-show

这个指令和上面的 v-if 这个指令在页面展示的样子是一样样的，但是！！！他们在底层处理方式却是不一样的。来看一下。

用法是一样样的，同样也可以作用在 div、template 上。

接下来，我们打开调试器，来看一下页面上的这些 DOM。

可以看到啊，用 v-show 的 DOM，不显示是因为通过设置样式将它隐藏起来了。而我们之前使用 v-if 的，不显示就是不显示，连 DOM 都没有。

三、v-if VS v-show

这个是从官网弄来的，大家自己看一下，根据不同场景，业务进行自己判断，该用啥用啥~~~

这一篇东西不多，自己练习一下

有问题可以联系我：QQ 2100363119，欢迎大家访问我的个人网站：https://www.lemon1234.com

最近网站已经做好，并且已经上线，欢迎各位留言~~~