【愚公系列】《循序渐进Vue.js 3.x前端开发实践》006-Vue 模板与应用：条件渲染

原创

愚公搬代码

发布于 2025-05-17 10:58:53

2490

文章被收录于专栏：循序渐进Vue.js 3.x前端开发实践循序渐进Vue.js 3.x前端开发实践

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在构建现代网页应用时，Vue.js 作为一款轻量级、高效的前端框架，已经成为了开发者们的首选。通过其简洁直观的语法，Vue 可以帮助开发者快速构建具有交互性的页面。其中，条件渲染是 Vue 中十分重要的一个功能，它能够根据数据的变化，动态控制元素的显示和隐藏，从而让页面内容更加灵活、智能。

在这篇文章我们将深入探讨如何利用 Vue 的条件渲染功能提升开发效率，并通过实际的代码示例带您掌握其中的核心技巧。无论你是刚接触 Vue 的新手，还是想要进一步提升技能的开发者，相信这篇文章都将为你提供实用的帮助。

🚀一、条件渲染

条件渲染是 Vue 控制 HTML 页面渲染的方式之一。很多时候，我们都需要通过条件渲染的方式来控制 HTML 元素的显示和隐藏。在Vue中,要实现条件渲染,可以使用 v-if指令,也可以使用v-show指令。本节将细致地探讨这两种指令的使用。

🔎1.代码解析

<!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>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="Application">
        <h1 v-if="show">标题</h1>
        <p v-else>如果不显示标题就显示段落</p>
        <h1 v-if="mark == 100">满分</h1>
        <h1 v-else-if="mark > 60">及格</h1>
        <h1 v-else>不及格</h1>
        <div v-if="show">
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
        </div>
        <template v-if="show">
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
        </template>
        <h1 v-if="show">v-if标题在这里</h1>
        <h1 v-show="show">v-show标题在这里</h1>
    </div>
    <script>
        const {createApp, ref} = Vue
        // 定义一个Vue组件, 名为App
        const config = {
            setup() {
                const show = ref(true)
                const mark = ref(100)
                return {show, mark}
            }
        }
        createApp(config).mount("#Application") 
    </script>
</body>
</html>

这段代码展示了 Vue.js 3 中条件渲染的不同方式，包括 v-if、v-else-if、v-else 和 v-show，并通过示例演示了它们的应用。

🦋1.1 HTML 头部部分

<!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>    
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<meta charset="UTF-8">：指定文档的字符编码为 UTF-8。
<meta http-equiv="X-UA-Compatible" content="IE=edge">：确保在 Internet Explorer 中使用最新的渲染模式。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口宽度为设备宽度，确保页面自适应显示。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>：引入 Vue 3 的全局版本。

🦋1.2 HTML body 部分

<body>
    <div id="Application">
        <h1 v-if="show">标题</h1>
        <p v-else>如果不显示标题就显示段落</p>

        <h1 v-if="mark == 100">满分</h1>
        <h1 v-else-if="mark > 60">及格</h1>
        <h1 v-else>不及格</h1>

        <div v-if="show">
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
        </div>

        <template v-if="show">
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
        </template>

        <h1 v-if="show">v-if标题在这里</h1>
        <h1 v-show="show">v-show标题在这里</h1>
    </div>
</body>

☀️1.2.1 使用 `v-i`f 和 `v-els`e

<h1 v-if="show">标题</h1> 和 <p v-else>如果不显示标题就显示段落</p>：
- v-if="show"：如果 show 为 true，渲染 <h1> 标题；否则渲染 <p> 段落。
- v-else：与 v-if 搭配使用，当 show 为 false 时，渲染 <p> 段落。

☀️1.2.2 使用 `v-i`f`、v-else-i`f 和 `v-els`e

<h1 v-if="mark == 100">满分</h1>：如果 mark 等于 100，则显示“满分”。
<h1 v-else-if="mark > 60">及格</h1>：如果 mark 大于 60 且不等于 100，则显示“及格”。
<h1 v-else>不及格</h1>：如果 mark 小于或等于 60，则显示“不及格”。

这个逻辑是一个典型的条件分支处理，通过 v-if 和 v-else-if 控制不同的输出。

☀️1.2.3 `v-i`f 与 `v-sho`w 的区别

<h1 v-if="show">v-if标题在这里</h1>：v-if 会根据 show 的值完全移除或添加该元素到 DOM 中。
<h1 v-show="show">v-show标题在这里</h1>：v-show 则只是通过 CSS display 属性来控制元素的显示和隐藏，元素始终存在于 DOM 中。
v-if 更适用于需要频繁添加和移除元素的情况，而 v-show 则适合元素频繁显示和隐藏，但不移除的场景。

☀️1.2.4 使用 `v-i`f 和 `templat`e

<div v-if="show"> 和 <template v-if="show">：
- <div> 中的内容如果 show 为 true 时会渲染多个 <p> 元素。
- <template> 标签不会在页面上生成任何元素，它只是用于包裹多个元素以进行条件渲染，等价于渲染相同的 <p> 元素。
- 区别：<div> 会生成一个包含 <p> 元素的 div，而 <template> 不会生成多余的父元素。

🦋1.3 Vue 实例部分

<script>
    const {createApp, ref} = Vue;
    
    const config = {
        setup() {
            // 定义响应式数据
            const show = ref(true);  // 控制元素显示或隐藏
            const mark = ref(100);   // 成绩
            return {show, mark};     // 返回给模板使用
        }
    }

    // 创建并挂载 Vue 实例到 id 为 Application 的元素上
    createApp(config).mount("#Application");
</script>

setup()：Vue 3 中的 setup 函数是组件的核心逻辑部分。
- show = ref(true)：定义一个响应式数据 show，初始值为 true，用来控制元素的显示和隐藏。
- mark = ref(100)：定义一个响应式数据 mark，初始值为 100，作为条件渲染的一部分。
- 这些响应式数据会返回给模板使用。
createApp(config).mount("#Application")：创建 Vue 应用并将其挂载到页面上 #Application 的 div 上，使该区域成为 Vue 控制的范围。

🦋1.4 总结

运行过程：

页面一开始会显示：
- 一个 h1 元素，内容为“标题”。
- 一个 h1 元素，内容为“满分”，因为 mark == 100。
- 三个 p 段落，内容为“内容”，通过 <div> 和 <template> 实现。
- v-if 的标题“v-if标题在这里”和 v-show 的标题“v-show标题在这里”。
当 show 为 false 时，页面会变为：
- <p> 元素显示“如果不显示标题就显示段落”。
- 满分显示逻辑以及内容区域不会发生变化，v-show 的标题依然会显示，尽管内容不可见。

v-if：用于在 DOM 中完全移除或添加元素，适用于条件动态性较高的情况。
v-show：用于频繁显示和隐藏元素，但元素仍然保留在 DOM 中，性能消耗较小。
v-else-if 和 v-else：用于实现多条件渲染逻辑。
<template>：用于在不产生额外 DOM 元素的情况下包裹多个元素进行条件渲染。（v-show无法使用）

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S13

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S13

登录后参与评论

0 条评论

热度