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

Vue19 列表过滤

news 2026/4/9 22:11:03

直接上代码

以下代码使用了两种实现方式，监视属性和计算属性
当能用计算属性实现时，推荐使用计算属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>列表过滤</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyWord"><ul><li v-for="(p,index) of filPerons" :key="index">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script type="text/javascript">Vue.config.productionTip = false//用watch实现//#region /* new Vue({el:'#root',data:{keyWord:'',persons:[{id:'001',name:'马冬梅',age:19,sex:'女'},{id:'002',name:'周冬雨',age:20,sex:'女'},{id:'003',name:'周杰伦',age:21,sex:'男'},{id:'004',name:'温兆伦',age:22,sex:'男'}],filPerons:[]},watch:{keyWord:{immediate:true,handler(val){this.filPerons = this.persons.filter((p)=>{return p.name.indexOf(val) !== -1})}}}}) *///#endregion//用computed实现new Vue({el:'#root',data:{keyWord:'',persons:[{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:{filPerons(){return this.persons.filter((p)=>{return p.name.indexOf(this.keyWord) !== -1})}}}) </script>
</html>

在这里插入图片描述

相关文章：

Vue19 列表过滤

直接上代码 以下代码使用了两种实现方式&#xff0c;监视属性和计算属性 当能用计算属性实现时&#xff0c;推荐使用计算属性 <!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>列表过滤</title><script type&q…...

编程日记 2023/11/27 13:05:57

【一起来学kubernetes】7、k8s中的ingress详解

引言配置示例负载均衡的实现负载均衡策略实现模式实现方案Nginx类型Ingress实现Treafik类型Ingress实现HAProxy类型ingress实现Istio类型ingress实现APISIX类型ingress实现 更多 引言 Ingress是Kubernetes集群中的一种资源类型&#xff0c;用于实现用域名的方式访问Kubernetes…...

编程日记 2023/11/27 13:03:55

[Java] 阿里一面~说一下ArrayList 与 LinkedList 区别

文章目录 是否保证线程安全底层数据结构插入和删除是否受元素位置的影响是否支持快速随机访问内存空间占用&#xff1a; 是否保证线程安全 ArrayList 和 LinkedList 都是不同步的&#xff0c;也就是不保证线程安全&#xff1b; 底层数据结构 ● ArrayList 底层使用的是 Obje…...

编程日记 2023/11/27 13:02:54

凸包问题的GRAHAM-SCAN解法 open3d c++ 代码

使用了Open3D库进行点云处理和可视化。下面是代码的大致解释： 引入必要的头文件和命名空间： 定义了三个函数： ComputeTriangleDirArea：计算带符号三角形的面积。Compute2Ddistance：计算两点之间的平面距离。GetConvexHullByGrahamScan：通过Graham Scan方法计算凸包点集。…...

编程日记 2023/11/27 13:01:53

从微软Cosmos DB浅谈一致性模型

最近回顾了微软的Cosmos DB的提供一致性级别&#xff0c;重新整理下一致性模型的相关内容。 0. Cosmos DB Cosmos DB&#xff08;Azure Cosmos DB&#xff09;是由微软推出的一个支持多模型、多 API 的全球分布式数据库服务。它旨在提供高度可扩展性、低延迟、强一致性和全球…...

编程日记 2023/11/27 13:00:51

spring-webmvc练习-日程管理-访问后端展示列表数据

1、util/request.js import axios from "axios";let request axios.create({baseURL: "http://localhost:8080",timeout: 50000 });export default request 2、api/schedule.js import request from "../util/request.js";export let getSchedu…...

编程日记 2023/11/27 12:59:50

【Linux系统编程】操作系统详解（什么是操作系统？为什么会存在操作系统？设计操作系统的目的是什么？）

目录 一、前言 二、 什么是操作系统 &#x1f4a6;操作系统的引入 &#x1f4a6;操作系统的概念理解 &#x1f4a6;操作系统设计的目的与定位 &#x1f4a6;总结 二、操作系统之上之下分别有什么 三、深度理解操作系统的“管理” &#x1f4a6;场景理解 &#x1f4a6;操…...

编程日记 2023/11/27 12:58:50

肖sir __数据库练习__001

建表语句&#xff1a; create table student ( id int(4),age int(8),sex int(4),name varchar(20), class int(4), math int(4)) DEFAULT charsetutf8; INSERT into student VALUES(1,25,1,‘zhansan’,1833,90); INSERT into student VALUES(2,25,1,‘lisi’,1833,67); INSER…...

编程日记 2023/11/27 12:56:48

【数据结构初阶】树，二叉树

树&#xff0c;二叉树 1.树概念及结构1.1树的概念1.2 树的相关概念1.3 树的表示1.4 树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; 2.二叉树概念及结构2.1概念2.2现实中的二叉树2.3 特殊的二叉树2.4 二叉树的性质2.5 二叉树的存储结构 1.树概念及结构 1.…...

编程日记 2023/11/27 12:55:47

HTML新手入门笔记整理：HTML常用标签总结表

HTML常用标签 标签 英文全称 语义 div division 区块(块元素) span span 区块(行内元素) p paragraph 段落 ol ordered list 有序列表 ul unordered list 无序列表 li list item 列表项 dl definition list 定义列表 dt definition term 定义术语 d…...

编程日记 2023/11/27 12:53:46

Linux7安装mysql数据库以及navicat远程连接mysql

1.下载地址&#xff1a;MySQL :: Download MySQL Community Server 2.创建mysql目录将压缩包上传到该目录 mkdir /opt/mysql cd /opt/mysql3.解压压缩包 gzip mysql-8.1.0-1.el7.x86_64.rpm-bundle.tar tar -zxvf mysql-8.1.0-1.el7.x86_64.rpm-bundle.tar.gz 4.前置检查 ch…...

编程日记 2023/11/27 12:52:45

FFmpeg命令分隔视频

有一个视频如a.mp4&#xff0c;此视频采用帧率为30生成&#xff0c;共有299帧&#xff0c;这里通过FFmpeg命令分隔成1秒一个个的小视频&#xff0c;即每个小视频帧数为30帧。 用到的FFmpeg参数如下所示&#xff1a; (1).-i:指定输入视频文件的名称&#xff1b; (2).-c:指…...

编程日记 2023/11/27 12:48:41

开源与闭源

我的观点&#xff1a; 开源与闭源软件都有各自的优势和劣势&#xff0c;没有绝对的对错之分。.. 一、开源和闭源的优劣势比较 开源的好处与劣处 优势&#xff1a; 创新与合作&#xff1a;开源软件能够吸引更多的开发者参与到项目中来&#xff0c;促进创新和合作。开放的源代码…...

编程日记 2023/11/27 12:47:38

详解Python对Excel处理

Excel是一种常见的电子表格文件格式&#xff0c;广泛用于数据记录和处理。Python提供了多个第三方库&#xff0c;可以方便地对Excel文件进行读写、数据操作和处理。本文将介绍如何使用Python对Excel文件进行处理&#xff0c;并提供相应的代码示例和详细说明。 一、安装第三方库…...

编程日记 2023/11/27 12:46:37

docker compose搭建渗透测试vulstudy靶场示例

前言 渗透测试&#xff08;Penetration test&#xff09;即网络安全工程师/安全测试工程师/渗透测试工程师通过模拟黑客&#xff0c;在合法授权范围内&#xff0c;通过信息搜集、漏洞挖掘、权限提升等行为&#xff0c;对目标对象进行安全测试&#xff08;或攻击&#xff09;&am…...

编程日记 2023/11/27 12:45:35

Python基础教程:强大的Pandas数据分析库

Pandas是一个基于 NumPy 的非常强大的开源数据处理库&#xff0c;它提供了高效、灵活和丰富的数据结构和数据分析工具&#xff0c;当涉及到数据分析和处理时&#xff0c;使得数据清洗、转换、分析和可视化变得更加简单和高效。本文中&#xff0c;我们将学习如何使用Pandas来处理…...

编程日记 2023/11/27 12:44:34

【深入剖析K8s】容器技术基础（一）：从进程开始说起

容器其实是一种特殊的进程而已。 可执行镜像 为了能够让这些代码正常运行’我们往往还要给它提供数据’比如我们这个加法程序所需要的输人文件这些数据加上代码本身的二进制文件放在磁盘上’就是我们平常所说的一个程序,也叫代码的可执行镜像&#xff08;executablejmage&…...

编程日记 2023/11/27 12:43:33

Mysql使用周期性计划任务定时备份，发现备份的文件都是空的？为什么？如何解决？

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…...

编程日记 2023/11/27 12:41:28

算法leetcode｜90. 子集 II（rust重拳出击）

文章目录 90. 子集 II&#xff1a;样例 1&#xff1a;样例 2&#xff1a;提示&#xff1a; 分析&#xff1a;题解&#xff1a;rust&#xff1a;go&#xff1a;c&#xff1a;python&#xff1a;java&#xff1a; 90. 子集 II&#xff1a; 给你一个整数数组 nums &#xff0c;其…...

编程日记 2023/11/27 12:37:23

git 泄露

得到flag有两种方法&#xff1a; 1、版本比对&#xff1a;git diff 用法&#xff1a;git diff <分支名1> <分支名2> 2、版本回退&#xff1a;git reset 用法&#xff1a;git reset --hard <分支名> python2 GitHack.py http://www.example.com/.git/ g…...

编程日记 2023/11/27 12:36:21

C语言逆向学习基础课 第8课 函数原型与可变参数使用误区

文章目录C语言实战高频深度错误解析一、第8课 函数原型与可变参数使用误区1.1 课程目标1.2 核心知识点讲解1.2.1 函数原型的作用与高频陷阱1.2.2 可变参数函数的正确使用&#xff08;重点误区&#xff09;1.3 实战示例&#xff08;综合错误排查&#xff09;1.4 课后作业&#x…...

编程新知 2026/4/9 20:27:55

记一次综合型流量分析 | 添柴不加火游

核心摘要&#xff1a;这篇文章能帮你 ?? 1. 彻底搞懂条件分支与循环的适用场景&#xff0c;告别选择困难。 ?? 2. 掌握遍历DOM集合修改属性的标准姿势与性能窍门。 ?? 3. 识别流程控制中的常见“坑”&#xff0c;并学会如何优雅地绕过去。 ?? 主要内容脉络 ?? 一、痛…...

编程新知 2026/4/9 20:25:54

从误报率47%到99.2%精准识别，PHP静态分析AI模型调优全过程，仅限内部团队流出

第一章&#xff1a;PHP AI 代码检测PHP AI 代码检测是指利用人工智能技术&#xff08;如静态分析模型、预训练代码语言模型、规则引擎与模式识别结合&#xff09;对 PHP 源码进行自动化缺陷识别、安全漏洞预警、代码风格合规性评估及潜在逻辑风险预测的过程。随着 PHP 生态中 C…...

编程新知 2026/4/9 20:13:31

Jenkins 学习总结沾

先唠两句&#xff1a;参数就像餐厅点单 把API想象成一家餐厅的“后厨系统”。 ? 路径参数/dishes/{dish_id} -> 好比你要点“宫保鸡丁”这道具体的菜&#xff0c;它是菜单&#xff08;资源路径&#xff09;的一部分。查询参数/dishes?spicytrue&typeSichuan -> 好比…...

编程新知 2026/4/9 20:07:27

MySQL数据库用户密码加密存储机制_Authentication Plugin配置

MySQL 8.0默认使用caching_sha2_password插件加密密码&#xff0c;采用SHA-256加盐哈希并缓存认证状态&#xff1b;旧客户端因不兼容该插件而无法连接&#xff0c;需通过ALTER USER切换为mysql_native_password或配置default_authentication_plugin。MySQL 8.0 默认用 caching_…...

编程新知 2026/4/9 19:59:04

您知道什么是AspectJ吗？【Java AOP的静态编织引擎】

目录 前言 核心洞察 核心概念与运行机制 1. 连接点 (Join Point) 2. 切入点 (Pointcut) 3. 通知 (Advice) 4. 切面 (Aspect) 三种编织方式 1. 编译时编织 (Compile-time Weaving) 2. 编译后编织 (Post-compile Weaving) 3. 加载时编织 (Load-time Weaving, LTW) Sp…...

编程新知 2026/4/9 19:08:45

人力资源管理AI落地实操：从踩坑到跑通的完整路径

人力资源管理AI是指将人工智能技术深度应用于招聘、人事、绩效、薪酬等HR管理全流程的智能化解决方案。 2026年&#xff0c;AI已从”锦上添花”变为HR部门的核心生产力工具&#xff0c;能够将简历筛选时间从平均3天缩短到4小时&#xff0c;绩效面谈记录效率提升6倍&#xff0c…...

编程新知 2026/4/9 18:26:29

灯具展板、展会展板哪里能找到？答案在这！

在灯具行业&#xff0c;无论是灯具门店的日常展示&#xff0c;还是参加各类展会&#xff0c;合适的展板都起着至关重要的作用。它们不仅能有效展示灯具的特点和魅力&#xff0c;还能提升整体的展示效果。那么&#xff0c;灯具展板、展会展板究竟哪里能找到呢&#xff1f;今天就…...

编程新知 2026/4/9 17:56:16

Win11Debloat：如何让Windows 11重获新生？一个开源工具的全方位解决方案

Win11Debloat&#xff1a;如何让Windows 11重获新生&#xff1f;一个开源工具的全方位解决方案 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other …...

编程新知 2026/4/9 17:52:15

3分钟解锁Windows安卓应用安装：告别模拟器的高效解决方案

3分钟解锁Windows安卓应用安装&#xff1a;告别模拟器的高效解决方案 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 在数字化工作与娱乐场景中&#xff0c;用户常常面…...

编程新知 2026/4/9 17:38:02