24.Vue条件渲染

未来@音律

已于 2022-06-23 14:35:22 修改

阅读量412

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue全家桶从入门到精通文章标签： vue.js 前端 javascript

于 2022-06-23 14:33:03 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/qq_37050372/article/details/125333996

Vue全家桶从入门到精通专栏收录该内容

39 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了Vue中的条件渲染，包括v-if和v-show的区别与应用场景，以及如何配合v-else、v-else-if使用。通过实例展示了它们在实际开发中的运用，例如根据变量控制元素显示、动态控制显示状态等。总结了v-if适合切换频率低且考虑性能的场景，而v-show适用于切换频繁的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这一节当中，我们来讲一下Vue中的条件渲染，顾名思义，意思就是，你符合某些条件，我再去给你渲染某些东西。

1.使用v-show做条件渲染

需求：需要实现标签显示和隐藏状态的切换

这个需求如果使用原生去实现的话，可以通过display属性来实现。那么在Vue中，我们不需要亲自去写这些属性，它给你提供了一个指令v-show，我们可以通过它来实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
       
    </style>
</head>
<body>