Vue.js 条件渲染和列表渲染

embedded/2025/1/15 4:55:56/

Vue.js 条件渲染和列表渲染

今天我们来聊聊 Vue.js 的两个基础功能:条件渲染列表渲染。这是写前端页面时必备的技能,掌握好它们,你就能轻松应对页面上的动态显示需求。

一、什么是条件渲染?

所谓条件渲染,就是根据某些条件决定是否显示某个内容。比如你想在页面上展示“登录”按钮,但用户已经登录了,就应该展示“退出”按钮。这就是一个典型的条件渲染场景。

在 Vue.js 中,我们用指令 v-ifv-else 来实现条件渲染。先看个简单例子:

<div id="app"><button v-if="isLoggedIn">退出</button><button v-else>登录</button>
</div><script>
new Vue({el: '#app',data: {isLoggedIn: false}
});
</script>

解释一下:

  • isLoggedIntrue 时,页面只会显示“退出”按钮。
  • isLoggedInfalse 时,页面会显示“登录”按钮。
v-if 的另一个朋友:v-else-if

有时候我们不仅仅是两种情况,还需要多种条件。这时候可以用 v-else-if

<div id="app"><p v-if="score >= 90">优秀</p><p v-else-if="score >= 60">及格</p><p v-else>不及格</p>
</div><script>
new Vue({el: '#app',data: {score: 75}
});
</script>

解释一下:

  • 如果 score 大于等于 90,显示“优秀”。
  • 如果 score 大于等于 60 且小于 90,显示“及格”。
  • 如果都不满足,就显示“不及格”。

二、v-show:一种高效的条件渲染

除了 v-if,Vue 还提供了 v-show。它的用法和 v-if 很像,但背后的实现有点不一样:

  • v-if 是真正的条件渲染,元素会被添加或移除到 DOM 中。
  • v-show 只是通过 display: none; 隐藏元素,DOM 结构始终保留。

什么时候用哪个?

  • 如果你需要频繁切换元素的显示状态,推荐用 v-show,因为效率更高。
  • 如果显示状态变化很少,比如页面加载时只显示一次,用 v-if 更合适。

来看个例子:

<div id="app"><p v-show="isVisible">这是一条提示信息</p><button @click="toggle">切换显示</button>
</div><script>
new Vue({el: '#app',data: {isVisible: true},methods: {toggle() {this.isVisible = !this.isVisible;}}
});
</script>

点击按钮会切换文字的显示和隐藏。这里用 v-show 非常高效。

三、什么是列表渲染?

条件渲染搞定了单个元素的显示和隐藏,但如果是多个数据呢?这时候就要用到 列表渲染,也就是用 v-for 来循环渲染数据。

来看个例子:

<div id="app"><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul>
</div><script>
new Vue({el: '#app',data: {items: [{ id: 1, name: '苹果' },{ id: 2, name: '香蕉' },{ id: 3, name: '橙子' }]}
});
</script>

解释一下:

  • v-for="item in items" 表示对 items 数组中的每个元素进行循环。
  • :key="item.id" 是必须的,它是每个元素的唯一标识,用于优化性能。
  • {{ item.name }} 会显示每个元素的名字。

最终页面上会渲染出一个带有苹果、香蕉、橙子的列表。

四、带索引的列表渲染

如果你还需要知道当前循环到了第几个元素,可以用 index

<ul><li v-for="(item, index) in items" :key="item.id">{{ index + 1 }}. {{ item.name }}</li>
</ul>

这里的 index 是从 0 开始计数的,所以我们用 index + 1 来显示更符合直觉的序号。

五、条件渲染结合列表渲染

如果你想对列表中的每个元素再加个条件,比如只显示价格大于 10 的商品,可以这样写:

<ul><li v-for="item in items" :key="item.id" v-if="item.price > 10">{{ item.name }} - {{ item.price }}元</li>
</ul>

但注意:Vue 不推荐在 v-for 内直接用 v-if,因为这样会导致性能问题。如果需要过滤数据,建议先用计算属性处理好:

<ul><li v-for="item in filteredItems" :key="item.id">{{ item.name }} - {{ item.price }}元</li>
</ul><script>
new Vue({el: '#app',data: {items: [{ id: 1, name: '苹果', price: 12 },{ id: 2, name: '香蕉', price: 8 },{ id: 3, name: '橙子', price: 15 }]},computed: {filteredItems() {return this.items.filter(item => item.price > 10);}}
});
</script>

六、总结

  • 条件渲染v-ifv-elsev-else-if,还有 v-show,分别适合不同场景。
  • 列表渲染v-for,可以循环数组,支持 key 属性和索引。
  • 不要在 v-for 中直接用 v-if,需要结合计算属性优化性能。

http://www.ppmy.cn/embedded/154022.html

相关文章

SOLID原则学习,开闭原则(Open Closed Principle, OCP)

文章目录 1. 定义2. 开闭原则的详细解释3. 实现开闭原则的方法4. 总结 1. 定义 开闭原则&#xff08;Open-Closed Principle&#xff0c;OCP&#xff09;是面向对象设计中的五大原则&#xff08;SOLID&#xff09;之一&#xff0c;由Bertrand Meyer提出。开闭原则的核心思想是…

【深度学习】核心概念-特征学习(Feature Learning)

特征学习&#xff08;Feature Learning&#xff09; 特征学习是机器学习和深度学习的核心概念之一&#xff0c;其目的是通过算法自动从数据中学习有效的特征表示&#xff0c;而不是依赖人工设计特征。特征学习的目标是让模型从原始数据中提取和表示有意义的信息&#xff0c;以…

【华为云开发者学堂】基于华为云 CodeArts CCE 开发微服务电商平台

实验目的 通过完成本实验&#xff0c;在 CodeArts 平台完成基于微服务的应用开发&#xff0c;构建和部署。 ● 理解微服务应用架构和微服务模块组件 ● 掌握 CCE 平台创建基于公共镜像的应用的操作 ● 掌握 CodeArts 平台编译构建微服务应用的操作 ● 掌握 CodeArts 平台部署微…

抖音集团数据血缘深度应用:架构、指标与优化实践

导读 本文简单介绍了“抖音集团数据资产管理平台”全貌,数据资产管理平台是抖音集团在复杂业务场景中思考的新方向,启发大家对于元数据以及数据资的全新思考。文章重点展开介绍了“抖音集团大数据血缘的演进和应用”部分,让大家以更宏观视角认识血缘,并在如何建设好数据血缘…

4. scala高阶之隐式转换与泛型

背景 上一节&#xff0c;我介绍了scala中的面向对象相关概念&#xff0c;还有一个特色功能&#xff1a;模式匹配。本文&#xff0c;我会介绍另外一个特别强大的功能隐式转换&#xff0c;并在最后介绍scala中泛型的使用 1. 隐式转换 Scala提供的隐式转换和隐式参数功能&#…

NLP三大特征抽取器:CNN、RNN与Transformer全面解析

引言 自然语言处理&#xff08;NLP&#xff09;领域的快速发展离不开深度学习技术的推动。随着应用需求的不断增加&#xff0c;如何高效地从文本中抽取特征成为NLP研究中的核心问题。深度学习中三大主要特征抽取器——卷积神经网络&#xff08;Convolutional Neural Network, …

vue集成导出 txt文本文档 和 excel文档 的方法

1、导出txt文档方法 &#xff08;1&#xff09;在template中定义方法 <template> <li><el-button class"download" type"success" click"download">下载</el-button> </li> </template>&#xff08;2&…

MR30分布式 IO 在物流分拣线的卓越应用

在当今物流行业高速发展的时代&#xff0c;物流分拣线的高效与精准运作至关重要&#xff0c;而其中对于货物点数较多情况下的有效控制更是一大关键环节。明达技术MR30分布式 IO 系统凭借其独特的优势&#xff0c;在物流分拣线中大放异彩&#xff0c;为实现精准的点数控制提供了…