【愚公系列】《循序渐进Vue.js 3.x前端开发实践》006-Vue 模板与应用：条件渲染
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。博客内容.NET、...
| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，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-if 和 v-else
<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-if、v-else-if 和 v-else
<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-if 与 v-show 的区别
-
<h1 v-if="show">v-if标题在这里</h1>：v-if会根据show的值完全移除或添加该元素到 DOM 中。 -
<h1 v-show="show">v-show标题在这里</h1>：v-show则只是通过 CSSdisplay属性来控制元素的显示和隐藏，元素始终存在于 DOM 中。 -
v-if更适用于需要频繁添加和移除元素的情况，而v-show则适合元素频繁显示和隐藏，但不移除的场景。
☀️1.2.4 使用 v-if 和 template
<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无法使用）
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）