当前位置：首页 > news >正文

FE_Vue学习笔记条件渲染[v-show v-if] 列表渲染[v-for] 列表过滤列表排序

news 2025/11/7 8:59:00

1 条件渲染 v-show v-if

使用template可以使其里面的内容在html的结构中不变。条件渲染：

v-if
1）v-if=“表达式”
2）v-else-if=“表达式”
3）v-else {}
适用于：切换频率较低的场景。特点：不展示的DOM元素直接被移除。注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”。
v-show
写法：v-show=“表达式”
适用于：切换频率较高的场景。特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉。
备注：使用v-if时，元素可能无法获取到，而使用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><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="conditional-rendering"><!-- 使用v-show做条件渲染 切换频率高--><!--    <h1 v-show="judge">hello {{ name }}</h1>--><!-- 使用v-if做条件渲染 切换频率低--><!--    <h1 v-if="judge">hello {{ name }}</h1>--><h2>当前的n值是:{{ n }}</h2><button @click="n++">点我n+1</button><!-- v-if和v-else-if --><div v-if="n === 1">Angular</div><div v-else-if="n === 2">React</div><div v-else-if="n === 3">Vue</div><div v-else>other</div><!-- v-if与template结合 --><template v-if="n === 1"><h2>hello-zhaoshuai-lc</h2></template>
</div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: '#conditional-rendering',data: {name: 'zhaoshuai-lc@inspur.com',judge: false,n: 1}})
</script>
</body>
</html>

2 列表渲染 v-for

用于展示列表数据
语法：v-for=“(item,index) in xxx” :key=“yyy”
可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="v-for"><ul><li v-for="item in personList" :key="item.id">{{ item.name }} - {{ item.age }}</li></ul>
</div>
<script type="text/javascript">new Vue({el: '#v-for',data: {personList: [{id: 1001, name: 'zhaoshuai-la', age: 101},{id: 1002, name: 'zhaoshuai-lb', age: 102},{id: 1003, name: 'zhaoshuai-lc', age: 103}]}})
</script>
</body>
</html>

在这里插入图片描述

    <ul><li v-for="(a, b) in personList">{{ a }} - {{ b }}</li></ul>

在这里插入图片描述
上面的key可以做一个替换：

    <ul><li v-for="(item, index) in personList" :key="index">{{ item.name }} - {{ item.age }}</li></ul>

in 也可以替换为 of:

    <ul><li v-for="(item, index) of personList" :key="index">{{ item.name }} - {{ item.age }}</li></ul>

除了数组还可以遍历对象：

<body>
<div id="v-for"><ul><li v-for="(value, key) of car" :key="key">{{ key }} - {{ value }}</li></ul></div>
<script type="text/javascript">new Vue({el: '#v-for',data: {car: {name: '奥迪A8',price: '70万',color: '黑色'}}})
</script>
</body>
</html>

在这里插入图片描述
测试遍历字符串：

  <ul><li v-for="(char, index) of str" :key="index">{{ index }} - {{ char }}</li></ul>
str: 'hello'

在这里插入图片描述

3 这里对于列表渲染的key的原理做一个说明

<body>
<div id="v-for"><button @click.once="add">添加一个 zhaoshuai-ld</button><ul><li v-for="(item, index) of personList" :key="index">{{ item.name }} - {{ item.age }}</li></ul></div>
<script type="text/javascript">new Vue({el: '#v-for',data: {personList: [{id: 1001, name: 'zhaoshuai-la', age: 101},{id: 1002, name: 'zhaoshuai-lb', age: 102},{id: 1003, name: 'zhaoshuai-lc', age: 103}]},methods: {add() {let person = {id: 1004, name: 'zhaoshuai-ld', age: 104}this.personList.unshift(person)}}})
</script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述
看似没有问题，其实问题很大，如下：遍历列表时key的作用（index作为key）

<body>
<div id="v-for"><button @click.once="add">添加一个 zhaoshuai-ld</button><ul><li v-for="(item, index) of personList" :key="index">{{ item.name }} - {{ item.age }}<input type="text"></li></ul></div>
<script type="text/javascript">new Vue({el: '#v-for',data: {personList: [{id: 1001, name: 'zhaoshuai-la', age: 101},{id: 1002, name: 'zhaoshuai-lb', age: 102},{id: 1003, name: 'zhaoshuai-lc', age: 103}]},methods: {add() {let person = {id: 1004, name: 'zhaoshuai-ld', age: 104}this.personList.unshift(person)}}})
</script>
</body>
</html>

在这里插入图片描述

遍历列表时key的作用（id作为key）

    <ul><li v-for="(item, index) of personList" :key="item.id">{{ item.name }} - {{ item.age }}<input type="text"></li></ul>

在这里插入图片描述

3.1 面试题：react、Vue中的key有什么作用？（key的内部原理）

虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
1）旧虚拟DOM中找到了与新虚拟DOM相同的key：

 若虚拟DOM中内容没变，直接使用之前的真实DOM若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

2）旧虚拟DOM中未找到与新虚拟DOM相同的key：

创建新的真实DOM，随后渲染到页面

用index作为key可能会引发的问题：

1）若对数据进行逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 > 界面效果没问题，但效率低。
2）如果结构中还包含输入类的DOM：会产生错误DOM更新 > 界面有问题。

开发中如何选择key？
1）最好使用每条数据的唯一标识作为key，比如说id、手机号、身份证号、学号等唯一值。
2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表中用于展示，使用index作为key是没有问题的。

4 列表过滤

4.1 用watch实现列表过滤

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="v-for"><input type="text" placeholder="请输入名字" v-model="keyWorld"><ul><li v-for="(item, index) of filterPersonList" :key="item.id">{{ item.name }} - {{ item.age }}</li></ul>
</div>
<script type="text/javascript">new Vue({el: '#v-for',data: {keyWorld: '',personList: [{id: '001', name: '马冬梅', age: 19, sex: '女'},{id: '002', name: '周冬雨', age: 20, sex: '女'},{id: '003', name: '周杰伦', age: 21, sex: '男'},{id: '004', name: '温兆伦', age: 22, sex: '男'}],filterPersonList: []},watch: {keyWorld: {immediate: true,handler(newValue, oldValue) {this.filterPersonList = this.personList.filter((item) => {return item.name.indexOf(newValue) !== -1})}}}})
</script>
</body>
</html>

在这里插入图片描述

4.2 用computed实现列表过滤

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="v-for"><input type="text" placeholder="请输入名字" v-model="keyWorld"><ul><li v-for="(item, index) of filterPersonList" :key="item.id">{{ item.name }} - {{ item.age }}</li></ul></div>
<script type="text/javascript">new Vue({el: '#v-for',data: {keyWorld: '',personList: [{id: '001', name: '马冬梅', age: 19, sex: '女'},{id: '002', name: '周冬雨', age: 20, sex: '女'},{id: '003', name: '周杰伦', age: 21, sex: '男'},{id: '004', name: '温兆伦', age: 22, sex: '男'}]},computed: {filterPersonList() {return this.personList.filter((item) => {return item.name.indexOf(this.keyWorld) !== -1})}}})
</script>
</body>
</html>

5 列表排序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="v-for"><input type="text" placeholder="请输入名字" v-model="keyWorld"><button @click="sortType = 2">升序</button><button @click="sortType = 1">降序</button><button @click="sortType = 0">原序</button><ul><li v-for="(item, index) of filterPersonList" :key="item.id">{{ item.name }} - {{ item.age }}</li></ul></div>
<script type="text/javascript">new Vue({el: '#v-for',data: {keyWorld: '',sortType: 0, // 0-原顺序 1-降序 2-升序personList: [{id: '001', name: '马冬梅', age: 19, sex: '女'},{id: '002', name: '周冬雨', age: 24, sex: '女'},{id: '003', name: '周杰伦', age: 55, sex: '男'},{id: '004', name: '温兆伦', age: 12, sex: '男'}]},computed: {filterPersonList() {let filterList = this.personList.filter((item) => {return item.name.indexOf(this.keyWorld) !== -1})// 判断是否需要排序if (this.sortType) {filterList.sort((a, b) => {return this.sortType === 1 ? b.age - a.age : a.age - b.age})}return filterList}}})
</script>
</body>
</html>

在这里插入图片描述

FE_Vue学习笔记条件渲染[v-show v-if] 列表渲染[v-for] 列表过滤列表排序

1 条件渲染 v-show v-if 使用template可以使其里面的内容在html的结构中不变。条件渲染： v-if 1）v-if“表达式” 2）v-else-if“表达式” 3）v-else {} 适用于：切换频率较低的场景。特点：不展示的DOM元素直…...

编程日记 2023/5/30 16:36:23

基于C++实现旅行线路设计

访问【WRITE-BUG数字空间】_[内附完整源码和文档] 系统根据风险评估，为旅客设计一条符合旅行策略的旅行线路并输出，系统能查询当前时刻旅客所处的地点和状态（停留城市/所在交通工具）。实验内容和实验环境描述 1.1 实验内容城…...

编程日记 2023/5/30 22:14:06

Lenovo m93 mini 电脑 Hackintosh 黑苹果efi引导文件

原文来源于黑果魏叔官网，转载需注明出处。（下载请直接百度黑果魏叔） 硬件型号驱动情况主板Lenovo m93 mini 处理器Intel i5-4590T 2.20GHz (35w) 4-core/4-thread已驱动内存8GB (2x4) DDR3 1600MHz已驱动硬盘2.5" SSD Samsung 8…...

编程日记 2023/5/12 20:58:17

【论文阅读】COPA：验证针对中毒攻击的离线强化学习的稳健策略

COPA: Certifying Robust Policies for Offline Reinforcement Learning against Poisoning Attacks 作者：Fan Wu, Linyi Li, Chejian Xu 发表会议：2022ICRL 摘要目前强化学习完成任务的水平已经和人类相接近，因此研究人员的目光开始转向…...

编程日记 2023/6/1 1:18:25

Java笔记_18(IO流)

Java笔记_18 一、IO流1.1、IO流的概述1.2、IO流的体系1.3、字节输出流基本用法1.4、字节输入流基本用法1.5、文件拷贝1.6、IO流中不同JDK版本捕获异常的方式二、字符集2.1、GBK、ASCII字符集2.2、Unicode字符集2.3、为什么会有乱码2.4、Java中编码和解码的代码实现2.5、字符输…...

编程日记 2023/5/12 20:48:15

前端vue3一键打包发布

一键打包发布可以分为两种，一是本地代码，编译打包后发布至服务器，二是直接在服务器上拉去代码打包发布至指定目录中。两种各有使用场景，第一种是前端开发自己调试发布用的比较多，第二种是测试或者其他人员用的多&…...

编程日记 2023/5/31 8:32:20

13 | visual studio与Qt的结合

1 前提 Qt 5.15.2 visual studio 2019 vsaddin 2.8 2 具体操作 2.1 visual studio tool 2.1.1 下载 https://visualstudio.microsoft.com/zh-hans/downloads/2.1.2 安装开发...

编程日记 2023/6/1 8:32:33

纯手动搭建大数据集群架构_记录019_集群机器硬盘爆满了_从搭建虚拟机开始_做个200G的虚拟机---大数据之Hadoop3.x工作笔记0179

今天突然就发现,使用nifi的时候集群满了...气死了.. 而在vmware中给centos去扩容,给根目录扩容,做的时候,弄了一天...最后还是报错, 算了从头搭建一个200G的,希望这次够用吧.后面再研究一下扩容的问题. 2023-05-12 11:06:48 原来的集群的机器,硬盘太小了,扩容不知道怎么回事…...

编程日记 2023/5/12 20:33:12

变量大小:—揭开不同类型的字节数

变量大小：一一揭开不同类型的字节数在编程中，我们会使用各种类型的变量来存储数据，但是你是否知道这些变量在内存中所占用的字节数是多少呢？随着不同编程语言和不同的操作系统，这些变量的字节数可能会有所不同。在本…...

编程日记 2023/5/12 20:28:11

23.自定义指令

像是 v-if,v-for,v-model 这些是官方指令，vue允许开发者自定义指令目录 1 mounted 1.1 基本使用 1.2 第一个形参 1.3 第二个形参 2 updated 3 函数简写 4 全局自定义指令 1 mounted 当指令绑定到元素身上的时候，就会自动触发mounted()…...

编程日记 2023/5/12 20:23:10

OPNET Modeler 例程——停等协议的建模和仿真

文章目录一、概述二、链路模型和包格式创建三、进程模型1.src 进程模型2.sink 进程模型四、节点模型五、网络模型六、仿真结果一、概述本例程是在 OPNET Modeler 中对停等协议的建模和仿真，其中停等协议的操作过程如下： （1）发…...

编程日记 2023/5/12 20:18:09

JavaScript - 基础+WebAPI（笔记）

前言： 求关注😭 本篇文章主要记录以下几部分： 基础： 输入输出语法；数据类型；运算符；流程控制 - 分支语句；流程控制 - 循环语句；数组 - 基础；函数 - 基础&…...

编程日记 2023/5/12 20:13:08

API调用的注意事项及好处！

API调用是指一个软件系统通过预定格式、协议和框架，向另一个软件系统发送请求并获得响应的过程。在进行API调用时需要注意以下事项： 1. 认真阅读API文档：在调用API前，一定要认真仔细地阅读相关的API文档，了解API接口…...

编程日记 2023/5/12 20:08:07

文章目录 1. ros1 中的rosrun tf tf_echo 在ros2中使用办法2. rqt 中 tf 树的查看3. roscd 在ros2中使用办法4. ros2获取时间的方法： 1. ros1 中的rosrun tf tf_echo 在ros2中使用办法 # ros2 run tf2_ros tf2_echo [reference_frame] [target_frame] ros2 run tf2…...

编程日记 2023/5/12 20:03:06

利用MySQL语句批量替换指定wordpress文章中的图片路径

很多时间我们将服务器中的图片下载到本地，然后删掉，但是有一个问题就是，所有文章中的图片路径还是以前的，没有根据域名来。导致下午某些时间段图片都是无法显示的，后来想到用MySQL直接批量替换，执行才不到1…...

编程日记 2023/5/12 19:58:05

Linux必会100个命令（六十）curl

在Linux中curl是一个利用URL规则在命令行下工作的文件传输工具，可以说是一款很强大的http命令行工具。它支持文件的上传和下载，是综合传输工具。 curl选项比较多，使用man curl或者curl -h获取帮助信息。 -a/--append …...

编程日记 2023/5/12 19:53:04

物联网硬件安全与整改梳理(1)

物联网安全工作梳理(0)_luozhonghua2000的博客-CSDN博客上篇讲了物联网总体安全知识框架和工作梳理，这篇单独讲下硬件安全方面的问题和整改知识技能点。硬件安全主要分5个方面来讲：硬件安全现状，硬件安全技术分析，典型案例，安全架构整改，安全整改措施。智能硬件安全总…...

编程日记 2023/5/12 19:48:03

【大数据学习篇3】HDFS命令操作与MR单词统计

1. HDFS命令使用 [rootmaster bin]# su hd[hdmaster bin]$ #查看/目录[hdmaster bin]$ hdfs dfs -ls / 5 #在/目录创建一个为test名字的文件夹[hdmaster bin]$ hdfs dfs -mkdir /test#查看/目录[hdmaster bin]$ hdfs dfs -ls Found 1 itemsdrwxr-xr-x - hd supergroup …...

编程日记 2023/5/12 19:43:02

java中设计模式总结

设计模式是实际工作中写的各种代码进行高层次抽象的总结，其中最出名的当属 Gang of Four (GoF) 的分类了，他们将设计模式分类为 23 种经典的模式，根据用途又可以分为三大类，分别为创建型模式、结构型模式和行为型模式。有一些重…...

编程日记 2023/5/30 5:33:37

ChatGPT不到1分钟生成全部代码，你就说慌不慌吧？

生成过程视频： 如何使用ChatGPT快速生成代码 (qq.com) 如何使用ChatGPT快速生成SpringBoot集成Dubbo的完整案例 1、Dubbo最新版本有哪些新特性 Dubbo最新版本是2.7.9，于2021年6月发布。以下是该版本的一些新特性： 1）增加Dubbo-go…...

编程日记 2023/6/1 1:20:30

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...

编程新知 2025/11/5 6:33:45

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2025/11/3 17:57:11

JUC笔记(上)-复习涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换即使单核CPU也可以进行多线程执行代码，CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短，所以CPU会不断地切换线程执行，从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/10/30 5:09:33

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统实现kefu123登录，不允许匿名访问，kefu只能访问/data/kefu目录，不能查看其他目录创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/10/26 14:58:46

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好，我是java1234_小锋老师，看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】，分享下哈。项目视频演示【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

编程新知 2025/11/2 20:24:05

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置配置manifest 文档：manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号：4.66 对应的sdk版本 4.66 两者必须一致本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2025/11/3 10:54:04

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具，用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中，cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/7/9 20:52:19

安卓基础（Java 和 Gradle 版本）

1. 设置项目的 JDK 版本方法1：通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分，设置 Gradle JDK 方法2：通过 Settings File → Settings... (或 CtrlAltS)…...

编程新知 2025/7/10 0:32:50

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目，设置虚拟环境，出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

编程新知 2025/8/9 4:55:19

全面解析数据库：从基础概念到前沿应用

在数字化时代，数据已成为企业和社会发展的核心资产，而数据库作为存储、管理和处理数据的关键工具，在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理，到社交网络的用户数据存储，再到金融行业的交易记录处理&a…...

编程新知 2025/9/19 11:48:17

FE_Vue学习笔记条件渲染[v-show v-if] 列表渲染[v-for] 列表过滤列表排序

1 条件渲染 v-show v-if

2 列表渲染 v-for

3 这里对于列表渲染的key的原理做一个说明

3.1 面试题：react、Vue中的key有什么作用？（key的内部原理）

4 列表过滤

4.1 用watch实现列表过滤

4.2 用computed实现列表过滤

5 列表排序

相关文章：

FE_Vue学习笔记条件渲染[v-show v-if] 列表渲染[v-for] 列表过滤列表排序

基于C++实现旅行线路设计

Lenovo m93 mini 电脑 Hackintosh 黑苹果efi引导文件

【论文阅读】COPA：验证针对中毒攻击的离线强化学习的稳健策略

Java笔记_18(IO流)

前端vue3一键打包发布

13 | visual studio与Qt的结合

纯手动搭建大数据集群架构_记录019_集群机器硬盘爆满了_从搭建虚拟机开始_做个200G的虚拟机---大数据之Hadoop3.x工作笔记0179

变量大小:—揭开不同类型的字节数

23.自定义指令

OPNET Modeler 例程——停等协议的建模和仿真

JavaScript - 基础+WebAPI（笔记）

API调用的注意事项及好处！

ros2中常用命令，与ros1的区别

利用MySQL语句批量替换指定wordpress文章中的图片路径

Linux必会100个命令（六十）curl

物联网硬件安全与整改梳理(1)

【大数据学习篇3】HDFS命令操作与MR单词统计

java中设计模式总结

ChatGPT不到1分钟生成全部代码，你就说慌不慌吧？

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

聊聊 Pulsar：Producer 源码解析

JUC笔记(上)-复习涉及死锁 volatile synchronized CAS 原子操作

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

掌握 HTTP 请求：理解 cURL GET 语法

安卓基础（Java 和 Gradle 版本）

pycharm 设置环境出错

全面解析数据库：从基础概念到前沿应用