Vue3进阶：条件语句控制内容展示的介绍和编码使用详解（附代码与群资料）

最新推荐文章于 2024-03-24 16:43:36 发布

SteveRocket

最新推荐文章于 2024-03-24 16:43:36 发布

阅读量247

点赞数 3

分类专栏： # Vue 文章标签： vue

本文链接：https://blog.csdn.net/zhouruifu2015/article/details/134820593

版权

Vue 专栏收录该内容

21 篇文章 3 订阅

订阅专栏

那么何时使用 `v-if`，何时使用 `v-show` 呢？

总结

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。

注意：由于排版太费时间，所以还是多多注重技术干货的内容吧。

接下来的一段时间我将除了总结下关于【Python进阶系列】的知识点分享文章外，还将为各位前端读者（全栈开发者）分享下关于前端开发框架Vue3的内容，当然还会包括：H5、CSS3、JavaScript、JQuery、前端开发规范等前端内容。

然后对Python开发感兴趣的读者也可以关注公众号CTO Plus，关注【Python进阶系列】的内容，同时涉及到Web开发、爬虫开发、操作系统开发、网络安全开发应用领域这块，可以分别参考我的公众号CTO Plus【Flask进阶系列】、【Django进阶系列】、【DRF进阶系列】、【互联网分布式爬虫系列】和【网络安全系列】的内容，敬请关注，欢迎交流。

以下是【Vue3进阶系列】的部分内容

Vue是一个流行的JavaScript框架，它提供了一种简洁而强大的方式来构建用户界面。Vue3是Vue框架的最新版本，引入了许多令人振奋的新功能和改进。

其中一个重要的功能就是条件语句（条件渲染），它允许开发者根据特定的条件来动态地决定是否展示或隐藏（渲染）DOM元素（组件或元素）。

在这篇文章中，我将为大家深入探讨和详细介绍Vue3中条件语句（条件渲染）的用法和示例技巧。

其他的指令详细介绍可以参考文章《Vue3进阶：简化前端开发的利器，以及常用指令汇总详解》和《Vue3进阶：常用的指令缩写详解，以及代码使用示例》。

v-if指令

在前面的几篇文章中也有介绍过v-if指令的使用。在Vue3中，使用v-if指令来实现条件渲染。v-if指令接受一个表达式作为参数，如果该表达式的值为真，则渲染相应的DOM元素；如果值为假，则不进行渲染。

代码示例

<body><p>author:<b>SteveRocket</b></p><p>WeChat:<a href="https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q">https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q</a></p>
    <div>        <p v-if="isVisible">这个段落会在isVisible为true时显示。公众号：CTO Plus</p>        <p v-if="!isVisible">这个段落会在isVisible为false时显示。公众号：CTO Plus</p>    </div></body><script>    const VueApp = {        data() {            return {                isVisible: true            }        }    }    Vue.createApp(VueApp).mount('body')</script>

输出结果

在这个例子中，根据`isVisible`的值，两个段落中的一个会被渲染到页面上。如果`isVisible`为true，第一个段落会显示；如果`isVisible`为false，第二个段落会显示。

在template中使用v-if

因为 v-if 是一个指令，所以必须将它添加到一个元素上。如果是多个元素，可以包裹在 <template> 元素上，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。下面是一个简单的例子：

<body><p>author:<b>SteveRocket</b></p><p>WeChat:<a href="https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q">https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q</a></p><template v-if="isShow">    <h1>作者：SteveRocket</h1>    <h2>公众号：CTO Plus</h2>    <div style="width: 100px; height: 20px; background-color: #7030AB"></div></template></body><script>    const VueApp = {        data() {            return {                isShow: true            }        }    }    Vue.createApp(VueApp).mount('body')</script>

输出结果

v-else、v-else-if

除了 `v-if` 指令，Vue 3 还提供了 `v-else` 指令，用于在条件不满足时渲染备选内容。

<body><p>author:<b>SteveRocket</b></p><p>WeChat:<a href="https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q">https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q</a></p>
<template v-if="isTemplate">    <div>        <p v-if="showMessage">这是v-if指令在控制</p>        <p v-else>showMessage的值为False</p>    </div>    <p v-if="age>25">大人</p>    <p v-else-if="0<age<18">未成年</p>    <p v-else-if="18<=age<=25">已成年</p>    <p v-else>未出生</p></template></body><script>    const VueApp = {        data() {            return {                age: 17,                isTemplate: true,                showMessage: true            }        }    }    Vue.createApp(VueApp).mount('body')</script>

在上述例子中，首先在template中使用了v-if指令，如果"isTemplate"为true，则显示template下面的一组元素，否则不展示。如果 `showMessage` 为 `true`，将会渲染 "这是v-if指令在控制"，否则将会渲染 " showMessage的值为False "。最后就是一个v-if、v-else-if、v-else的使用。v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

输出结果

v-show指令

除了v-if指令，Vue3还提供了v-show指令来实现条件渲染。v-show指令与v-if指令类似，也根据表达式的真假来决定是否显示相应的内容，但有一个重要的区别：v-show指令始终会渲染DOM元素到页面上，只是通过CSS的display属性来控制元素的显示和隐藏。

下面是一个使用v-show指令的例子：

<template>  <div>    <p v-show="isVisible">这个段落会根据isVisible的值来显示或隐藏</p>  </div></template><script>
export default {  data() {    return {      isVisible: true    }  }}</script>

在这个例子中，无论`isVisible`的值是true还是false，段落都会被渲染到页面上，只是显示和隐藏的方式不同，该元素的显示状态将通过 CSS 控制隐藏。

与v-if指令相比，v-show指令通常更适合用于频繁切换显示和隐藏的元素，因为它只是通过CSS来进行控制，并没有引入额外的DOM操作。

那么何时使用 `v-if`，何时使用 `v-show` 呢？

n 如果需要频繁切换是否显示某个元素，或者初始渲染时元素的显示状态是受条件控制的，那么可以使用 `v-show`。因为 `v-show` 只是通过 CSS 控制元素的显示与隐藏，切换时不会重新渲染元素，因此性能比较高。

n 如果元素的显示与隐藏频率较低，且初始渲染时元素的显示状态是不确定的，那么可以使用 `v-if`。因为 `v-if` 在切换时会重新创建或销毁元素，因此可以节省一些内存和渲染的开销。

总结

Vue 3 中的条件渲染通过 `v-if` 和 `v-show` 指令提供了灵活的条件渲染功能。使用 `v-if` 可以根据表达式的真假来决定是否渲染元素，并且在条件不满足时可以使用 `v-else` 来渲染备选内容。使用 `v-show` 可以切换元素的显示与隐藏，通过 CSS 控制。根据实际场景选择合适的指令和技巧，可以让我们更好地处理条件渲染的需求。

希望通过本文的介绍，你对Vue3的条件语句有了更深入的了解，能够灵活运用它们来构建出令人满意的应用程序。

后面的文章将分别介绍以下内容：