Vue3专题 - 列表渲染-北京尧图网络

大家好我是Java1234_小锋老师最近更新《一天学会 Vue3 Vite element-plus UI框架视频教程》专辑感谢大家支持。本课程主要介绍和讲解 Vue3框架Vite构建工具以及element-plus UI框架。Vue3核心知识介绍Vite构建工具使用以及element-plus UI框架的基础组件配置组件Form 表单组件Data 数据展示组件Navigation导航组件Feedback反馈组件Container布局组件介绍和使用。视频教程课件源码打包下载链接https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd1234提取码1234具体位置 - 第四阶段富客户端技术里面Vue3专题 - 列表渲染列表渲染用来根据数组或对象批量生成一组 DOM。Vue3 用v-for指令完成这件事。适合商品列表、待办事项、评论区、表格行、下拉选项等场景。1. 为什么需要列表渲染页面上经常要展示「很多条结构相同的数据」。如果一条条手写标签数据一变就要手动改 DOM。用v-for绑定数组后增删改数据列表会自动更新!-- 不推荐手写很多重复标签 -- li苹果/li li香蕉/li li橙子/li !-- 推荐用 v-for 根据数据生成 -- li v-foritem in fruits :keyitem{{ item }}/li2. v-for 基本用法2.1 遍历数组语法v-foritem in list也可写成(item, index) in list拿到下标。script setup /** * v-for 基础 Demo * 根据水果数组渲染列表 */ import { ref } from vue /** 水果列表 */ const fruits ref([苹果, 香蕉, 橙子]) /script template ul li v-for(item, index) in fruits :keyindex {{ index 1 }}. {{ item }} /li /ul /template要点item是当前项index是下标从 0 开始模板里fruits会自动解包不用写.value尽量给每项加:key见下文运行截图2.2 必须了解key:key帮 Vue 识别「哪一项是哪一项」在列表增删、排序、过滤时复用/更新 DOM 更准确。li v-foritem in list :keyitem.id {{ item.name }} /li建议优先用唯一且稳定的 id数据库主键、UUID 等不要轻易用index当 key尤其列表会插入、删除、排序时key的值在同一列表里应唯一2.3 遍历对象也可以遍历对象的属性script setup /** * v-for 遍历对象 Demo */ import { reactive } from vue /** 用户信息对象 */ const user reactive({ name: 小明, age: 20, city: 上海 }) /script template ul !-- value属性值key属性名index序号 -- li v-for(value, key, index) in user :keykey {{ index 1 }}. {{ key }}{{ value }} /li /ul /template运行截图2.4 用template包一组元素想为每一项渲染多个相邻标签时用template本身不会生成额外标签template v-foritem in list :keyitem.id h4{{ item.title }}/h4 p{{ item.desc }}/p /template3. 数组更新会驱动视图Vue 能追踪常见数组变更方法调用后列表会自动刷新方法作用push/pop末尾增 / 删shift/unshift开头删 / 增splice按位置增删改sort/reverse排序 / 反转也可以整体替换数组如过滤、映射后赋新值script setup /** * 数组操作 Demo * 演示增删与过滤 */ import { ref } from vue const todos ref([ { id: 1, text: 学习 Vue3 }, { id: 2, text: 写列表 Demo } ]) let nextId 3 /** 追加一项 */ function addTodo() { todos.value.push({ id: nextId, text: 新任务 }) } /** 删除指定 id */ function removeTodo(id) { todos.value todos.value.filter((t) t.id ! id) } /script template button clickaddTodo添加/button ul li v-fortodo in todos :keytodo.id {{ todo.text }} button clickremoveTodo(todo.id)删除/button /li /ul /template运行截图4. v-for 和 v-if不要写在同一个元素上可读性差且容易踩坑。推荐先过滤数据或用template分层!-- 推荐先算好要渲染的列表 -- li v-foritem in activeList :keyitem.id {{ item.name }} /li !-- 或外层 template 过滤内层再渲染 -- template v-foritem in list :keyitem.id li v-ifitem.active{{ item.name }}/li /template空列表提示可以配合条件渲染p v-iflist.length 0暂无数据/p ul v-else li v-foritem in list :keyitem.id{{ item.name }}/li /ul5. 入门综合 Demo一个简易待办列表支持添加、完成切换、删除并用v-if显示空状态。script setup /** * 列表渲染综合 Demo * - v-for渲染待办列表 * - :key用唯一 id 标识每一项 * - 数组方法push / filter / 改属性 * - v-if空列表提示 */ import { ref, computed } from vue /** 待办列表 */ const todos ref([ { id: 1, text: 学习 v-for, done: true }, { id: 2, text: 理解 key 的作用, done: false }, { id: 3, text: 完成列表 Demo, done: false } ]) /** 输入框内容 */ const input ref() /** 下一 id */ let nextId 4 /** 未完成数量 */ const leftCount computed(() todos.value.filter((t) !t.done).length) /** 添加待办 */ function addTodo() { const text input.value.trim() if (!text) return todos.value.push({ id: nextId, text, done: false }) input.value } /** 切换完成状态 */ function toggleTodo(id) { const todo todos.value.find((t) t.id id) if (todo) todo.done !todo.done } /** 删除一项 */ function removeTodo(id) { todos.value todos.value.filter((t) t.id ! id) } /script template h3待办列表/h3 p剩余未完成{{ leftCount }}/p div classrow input v-modelinput placeholder输入待办内容 keyup.enteraddTodo / button clickaddTodo添加/button /div p v-iftodos.length 0暂无待办先添加一条吧/p ul v-else li v-fortodo in todos :keytodo.id :class{ done: todo.done } label input typecheckbox :checkedtodo.done changetoggleTodo(todo.id) / {{ todo.text }} /label button clickremoveTodo(todo.id)删除/button /li /ul /template style .row { margin-bottom: 12px; } .row input { margin-right: 8px; } .done { color: #999; text-decoration: line-through; } ul { padding-left: 0; list-style: none; } li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #eee; } /style运行效果预期初始显示 3 条待办第 1 条已完成删除线输入内容点「添加」或回车列表末尾多一项勾选复选框完成状态切换剩余数量跟着变点「删除」该项从列表消失删光后出现空状态提示运行截图

Vue3专题 - 列表渲染

相关推荐

11_比较排序去重函数

npj Biofilms and Microbiomes期刊文章：发现肠肺调控通路，云克隆亚精胺ELISA 试剂盒助力机制研究

12_基本运算和广播机制

更多资讯

Yii2 REST 响应格式化指南：Content Negotiation、Serializer 与 JSON/XML 输出控制

Kubernetes 云原生可观察性（Observability）实践指南：指标、日志与追踪三大支柱详解

embassy-net-wiznet 0.3.0 演进解读：WIZnet SPI 以太网驱动的多芯片支持与中断寄存器重构

云手机原理与 Python 自动化实战：ADB 单机到百台群控，附傲晨云手机选型建议

Ceph test_orchestrator 模块实战指南：用模拟数据驱动 ceph orch 编排器开发与集成测试

南航双中台实践：业务中台与数据中台如何驱动数字化转型

今日更新

Play Framework 迁移指南：移除 GlobalSettings，全面转向依赖注入（Scala 与 Java）

Numba 类型推断机制详解：从 Numba IR 到编译期类型重建的完整原理与实践

企业级项目dragonballz_e159-1的技术架构与实现方案

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？