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

Vue21-列表排序

news 2026/5/12 22:02:47

一、需求

二、解决方式

<body><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入" v-model="keyword"><button @click="sortType = 1">年龄升序</button><button @click="sortType = 2">年龄降序</button><button @click="sortType = 0">原顺序</button><ul><li v-for="(p, index) of filPersons" ::key="index">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script>const vm = new Vue({el:'#root',data:{keyword:'',persons:[{id:'001', name:'马冬梅', age:18, sex:'女'},{id:'002', name:'周冬雨', age:17, sex:'女'},{id:'003', name:'周杰伦', age:19, sex:'男'},{id:'004', name:'温兆伦', age:20, sex:'男'},],sortType:''},computed:{filPersons(){// 1、过滤const arr = this.persons.filter((p)=>{return p.name.indexOf(this.keyword) !== -1;})// 2、排序if(this.sortType){// 需要排序// sort函数会改变原数组的值！！！arr.sort((p1,p2)=>{return this.sortType === 1 ? p1.age - p2.age : p2.age - p1.age;})}// 计算属性的值就是return的值！！！return arr;}}})</script></body>

三、小结

只要计算属性的逻辑中用到的属性值发生变化，整个计算属性都重新计算！！！

相关文章：

Vue21-列表排序

一、需求 二、解决方式 <body><div id"root"><h2>人员列表</h2><input type"text" placeholder"请输入" v-model"keyword"><button click"sortType 1">年龄升序</button><b…...

编程日记 2024/6/12 17:47:31

配置 JDK 和 Android SDK

目录 一、配置JDK 1. 安装 JDK 2. JDK 环境配置 3. JDK的配置验证 二、配置 adb 和Android SDK环境 1、下载 2、配置 Android SDK 环境 一、配置JDK 1. 安装 JDK 安装链接&#xff1a;Java Downloads | Oracle 我安装的是 .zip &#xff0c;直接在指定的文件夹下解压就…...

编程日记 2024/6/12 17:46:30

pyechart 创建柱形图

Pyecharts 是一个基于 Python 的开源数据可视化库&#xff0c;用于创建各种交互式的图表和可视化效果。它是在 Echarts 的基础上进行封装和优化&#xff0c;Echarts 是一个流行的 JavaScript 数据可视化库pyecharts 中文网站 : https://pyecharts.org/# pyecharts 模块 还支持…...

编程日记 2024/6/12 17:45:28

c#引用dll报错cs8370功能“本地函数特性“在c#7.3中不可用

cs8370:功能"本地函数特性"在c#7.3中不可用 解决方法&#xff1a; 代码放在form类里面...

编程日记 2024/6/12 17:44:27

【STM32】输入捕获应用-测量脉宽或者频率（方法1）

图1 脉宽/频率测量示意图 1 测量频率 当捕获通道TIx 上出现上升沿时&#xff0c;发生第一次捕获&#xff0c;计数器CNT 的值会被锁存到捕获寄存器CCR中&#xff0c;而且还会进入捕获中断&#xff0c;在中断服务程序中记录一次捕获&#xff08;可以用一个标志变量来记录&#…...

编程日记 2024/6/12 17:43:26

C# Task

以下是 Task 类的一些关键特性和用法&#xff1a;以下是一些使用 Task 的示例&#xff1a;创建并启动一个任务使用 await 等待任务完成处理任务异常使用 Task<TResult> 获取结果取消任务 总结 在 C#中&#xff0c; Task 是 System.Threading.Tasks 命名空间中的一个类…...

编程日记 2024/6/12 17:42:25

进口电动蝶阀的工作原理-美国品牌

进口电动蝶阀通过电力驱动&#xff0c;实现阀门的开启、关闭和流量调节功能。其结构简单、操作方便、精确控制的特点使其在多个领域得到广泛应用。 进口电动蝶阀的工作原理可以清晰地分点表示和归纳如下&#xff1a; 一、概述 进口电动蝶阀是由电动执行器和蝶形阀组成的一种…...

编程日记 2024/6/12 17:41:24

Exploring Performance and Cost Optimization with ASIC-Based CXL Memory——论文阅读

EuroSys 2024 Paper CXL论文阅读笔记整理 问题 随着内存密集型应用程序对内存需求的增加&#xff0c;受限于物理限制&#xff0c;如DDR DIMM插槽的可用性和发热问题&#xff0c;以及使用高密度DIMM的成本考虑&#xff0c;现代应用程序的内存需求很容易超过单机的内存容量[2&a…...

编程日记 2024/6/12 17:40:22

计算机网络(4) 最长前缀匹配（路由转发表）

一.路由转发 网络数据包IP段只包含源地址与目的地址&#xff0c;经过数据链路层包装与物理层信号形式转换&#xff0c;最终经由不同的链路节点到达目的地址。这个过程是一步一步&#xff08;hop by hop&#xff09;进行的&#xff0c;路过一个路由节点则称为一跳。每个路由节点…...

编程日记 2024/6/12 17:39:19

向https地址发送请求失败报错

错误1&#xff1a; 10:13:47.520 [main] DEBUG org.apache.http.conn.ssl.SSLConnectionSocketFactory - Starting handshake 10:13:47.523 [main] DEBUG org.apache.http.impl.conn.DefaultManagedHttpClientConnection - http-outgoing-0: Shutdown connection 10:13:47.523…...

编程日记 2024/6/12 17:38:19

生信技能47 - Shell程序和R程序并行执行处理方法

Linux shell和R程序并行化执行程序方法。 1. 使用do{…} &;done;wait语句并行执行Shell 并行执行总运行时间不再是task数量*单个任务消耗时间，而是取决于单个耗时最长的任务。 # while循环，遍历test.txt文件每行 cat test.txt|while read i; dotime_stamp=$(date &quo…...

编程日记 2024/6/12 17:37:18

java+SimpleRegression 线性模型，针对采集到的大数据设备温度，对设备温度做出预测

首先，让我们通过以下表格展示预测模型开发 Java 的整体流程： 步骤 描述 1 数据收集与清洗 2 特征工程处理 3 模型选择与训练 4 模型评估与调优 5 模型应用与部署 然后引入java的类库 org.apache.commons.math3 math使用原则 math3可谓是轻量级自容器…...

编程日记 2024/6/12 17:36:17

面对失业，不得不做出改变了

有没有发现最近挣钱很难&#xff0c;生活压力很大 大批企业纷纷裁员&#xff0c;大量的就业岗位被机器人机械臂取代 很多的传统职业也将被AI替代, 比如工厂螺丝钉、司机、客服、甚至程序员、医生、等等 众多大厂开发无人驾驶出租车&#xff0c;让本来处在底层的网约车司机无…...

编程日记 2024/6/12 17:35:16

MT2093 活动安排

贪心策略&#xff1a; 每次选择结束时间最早的活动 代码&#xff1a; #include <bits/stdc.h> using namespace std; const int N 5e5 10; int n; struct pp {int a, b; } p[N]; bool cmp(pp x, pp y) {return x.b < y.b; } int ans 0;int main() {cin >>…...

编程日记 2024/6/12 17:34:14

动态javaweb 建立-准备阶段

一、实验内容&#xff1a; 1.定义一个inputjsp页面接收数据输入的长和宽。 2.创建一个javaBean&#xff0c;包含长、宽和面积三个成员变量&#xff0c;分别有对应的get方法和set方法。 3.定义一个业务模型calculate.java&#xff0c;用来计算矩形的面积。 4.定义一个…...

编程日记 2024/6/12 17:33:12

web前端网页设计参考：深度剖析与设计思路探索

web前端网页设计参考&#xff1a;深度剖析与设计思路探索 在Web前端开发领域&#xff0c;网页设计占据着举足轻重的地位。一个优秀的网页设计不仅能提升用户体验&#xff0c;还能有效传达品牌价值和信息。本文将从四个方面、五个方面、六个方面和七个方面&#xff0c;深入剖析…...

编程日记 2024/6/12 17:32:11

node使用http-proxy-middleware做代理，解决跨域问题

const express require(express) const history require(connect-history-api-fallback) const { createProxyMiddleware } require(http-proxy-middleware)let app express()app.use(history())// //匹配api开头的请求&#xff0c;实际转发的请求保api这三个字母 // app.u…...

编程日记 2024/6/12 17:31:09

爱奇艺视频怎么转换成mp4格式，爱奇艺qsv转换mp4最简单方法

在数字化时代&#xff0c;视频格式的转换成为了我们日常生活中常见的需求。特别是对于那些经常从各大视频平台下载视频的朋友来说&#xff0c;将特定格式的视频转换为更通用的格式&#xff0c;如MP4&#xff0c;变得尤为重要。其中&#xff0c;qsv格式的视频转换就是一项常见的…...

编程日记 2024/6/12 17:30:08

HandyControl的属性编辑器如何绑定自定义控件，并集成到自定义编辑器

第一步&#xff1a;自定义控件的TypeDescription描述。 为了扩展.NET的类型描述系统(Type Descriptor System)&#xff0c;在运行时动态地更改对象的属性&#xff0c;使得这些属性在PropertyGrid上下文中不会被显示。 1.CLTypeDescriptionProvider&#xff1a;这是一个TypeDesc…...

编程日记 2024/6/12 17:28:05

【Python】使用 Python 检测图像中(色差对比度较大)的水印

我已经从你的 全世界路过 像一颗流星 划过命运 的天空 很多话忍住了 不能说出口 珍藏在 我的心中 只留下一些回忆 &#x1f3b5; 牛奶咖啡《从你的全世界路过》 前言 在图像处理领域中&#xff0c;检测图像中的水印是一项重要任务。水印通常用于保护图像…...

编程日记 2024/6/12 17:26:01

千万级用户购物车系统的架构设计

我们当时搞的购物车服务&#xff0c;其实还是有点庞大的&#xff0c;看似是一个简单的CRUD&#xff0c;但是当你真正去实现一个购物车的时候&#xff0c;发现压根不是那回事。 当商品类型从单一SKU扩展到普通商品、套餐组合、活动商品&#xff0c;拼单等混合的时候&#xff0c;…...

编程新知 2026/5/12 21:31:07

AgenticROS：用自然语言操控ROS2机器人的AI Agent接口实践

1. 项目概述&#xff1a;当AI大模型遇见机器人操作系统如果你和我一样&#xff0c;既对AI大模型的能力着迷&#xff0c;又对机器人开发充满兴趣&#xff0c;那么你肯定想过一个问题&#xff1a;能不能让Claude、Gemini这样的AI&#xff0c;像我们人类工程师一样&#xff0c;直接…...

编程新知 2026/5/12 21:03:39

别再手动造数据了！用Python的imgaug库5分钟搞定深度学习图像增强（附关键点/边界框处理避坑指南）

深度学习图像增强实战&#xff1a;用imgaug打造高效数据流水线 在计算机视觉项目中&#xff0c;数据增强是提升模型泛化能力的关键步骤。传统手动处理方式不仅耗时耗力&#xff0c;还难以保证处理一致性。本文将深入探讨如何利用Python的imgaug库快速构建自动化图像增强流程&am…...

编程新知 2026/5/12 19:50:00

小白程序员必看：收藏这份AI黑话指南，轻松入门大模型世界！

本文用大白话解释了AI领域几个核心概念&#xff1a;AI是总称&#xff0c;LLM是推理模型&#xff0c;Agent能独立执行任务&#xff0c;MCP是标准化接口&#xff0c;Skills是技能包。文章通过生活化比喻和实例&#xff0c;帮助读者理解这些概念如何协同工作&#xff0c;实现高效自…...

编程新知 2026/5/12 18:31:00

Pytorch图像去噪实战（七十三）：ELK日志采集实战，集中分析接口异常、慢请求和用户上传问题

Pytorch图像去噪实战（七十三）：ELK日志采集实战，集中分析接口异常、慢请求和用户上传问题 一、问题场景：日志散落在各个容器里，排查问题非常痛苦 图像去噪服务上线后，日志会越来越多： FastAPI访问日志 模型推理日志 Nginx访问日志 Worker任务日志 Celery错误日志 GPU异…...

编程新知 2026/5/12 17:58:43

TongWeb实战：GBase数据库连接池的配置与性能调优指南

1. 连接池基础与TongWeb集成 第一次在TongWeb里配置GBase数据库连接池时&#xff0c;我犯了个低级错误——直接把最大连接数设成了1000&#xff0c;结果系统刚上线就崩溃了。后来才明白&#xff0c;连接池不是越大越好&#xff0c;它本质上是个数据库连接的共享停车场。想象一…...

编程新知 2026/5/12 17:12:51

如何在Chrome浏览器中一键生成与扫描二维码：Chrome QRCode插件终极指南

如何在Chrome浏览器中一键生成与扫描二维码&#xff1a;Chrome QRCode插件终极指南 【免费下载链接】chrome-qrcode :zap: A Chrome plugin to Genrate QRCode of URL / Text, or Decode the QRcode in website. 一个Chrome浏览器插件&#xff0c;用于生成当前URL或者选中内容的…...

编程新知 2026/5/12 17:08:35

如何高效使用DdddOcr：免费开源的离线验证码识别终极指南

如何高效使用DdddOcr&#xff1a;免费开源的离线验证码识别终极指南 【免费下载链接】ddddocr 带带弟弟 通用验证码识别OCR pypi版 项目地址: https://gitcode.com/gh_mirrors/dd/ddddocr 在当今数字世界中&#xff0c;验证码识别已成为自动化测试、数据采集和网络安全测…...

编程新知 2026/5/12 16:13:18

技术深度解析CoverM在PacBio HiFi宏基因组测序数据覆盖率分析中的应用

技术深度解析CoverM在PacBio HiFi宏基因组测序数据覆盖率分析中的应用 【免费下载链接】CoverM Read alignment statistics for metagenomics 项目地址: https://gitcode.com/gh_mirrors/co/CoverM CoverM作为一款专门用于计算基因组覆盖率的生物信息学工具&#xff0c;…...

编程新知 2026/5/12 16:02:28

2026年全国优质化妆培训机构深度盘点

颜值经济持续升温背景下&#xff0c;2026年化妆行业迎来规范化、专业化发展新阶段&#xff0c;涵盖影视、时尚、婚庆等多个领域&#xff0c;市场对专业化妆人才的需求持续攀升。据相关行业数据显示&#xff0c;2026年美业职业培训市场预计保持11%以上增速&#xff0c;美业门店专…...

编程新知 2026/5/12 14:07:31