Vue19 列表过滤
直接上代码
以下代码使用了两种实现方式，监视属性和计算属性
当能用计算属性实现时，推荐使用计算属性
<!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 列表过滤
直接上代码 以下代码使用了两种实现方式，监视属性和计算属性 当能用计算属性实现时，推荐使用计算属性 <!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>列表过滤</title><script type&q…...
【一起来学kubernetes】7、k8s中的ingress详解
引言配置示例负载均衡的实现负载均衡策略实现模式实现方案Nginx类型Ingress实现Treafik类型Ingress实现HAProxy类型ingress实现Istio类型ingress实现APISIX类型ingress实现 更多 引言 Ingress是Kubernetes集群中的一种资源类型，用于实现用域名的方式访问Kubernetes…...
[Java] 阿里一面~说一下ArrayList 与 LinkedList 区别
文章目录 是否保证线程安全底层数据结构插入和删除是否受元素位置的影响是否支持快速随机访问内存空间占用： 是否保证线程安全 ArrayList 和 LinkedList 都是不同步的，也就是不保证线程安全； 底层数据结构 ● ArrayList 底层使用的是 Obje…...
凸包问题的GRAHAM-SCAN解法 open3d c++ 代码
使用了Open3D库进行点云处理和可视化。下面是代码的大致解释： 引入必要的头文件和命名空间： 定义了三个函数： ComputeTriangleDirArea：计算带符号三角形的面积。Compute2Ddistance：计算两点之间的平面距离。GetConvexHullByGrahamScan：通过Graham Scan方法计算凸包点集。…...
从微软Cosmos DB浅谈一致性模型
最近回顾了微软的Cosmos DB的提供一致性级别，重新整理下一致性模型的相关内容。 0. Cosmos DB Cosmos DB（Azure Cosmos DB）是由微软推出的一个支持多模型、多 API 的全球分布式数据库服务。它旨在提供高度可扩展性、低延迟、强一致性和全球…...
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…...
【Linux系统编程】操作系统详解（什么是操作系统？为什么会存在操作系统？设计操作系统的目的是什么？）
目录 一、前言 二、 什么是操作系统 💦操作系统的引入 💦操作系统的概念理解 💦操作系统设计的目的与定位 💦总结 二、操作系统之上之下分别有什么 三、深度理解操作系统的“管理” 💦场景理解 💦操…...
肖sir __数据库练习__001
建表语句： 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…...
【数据结构初阶】树，二叉树
树，二叉树 1.树概念及结构1.1树的概念1.2 树的相关概念1.3 树的表示1.4 树在实际中的运用（表示文件系统的目录树结构） 2.二叉树概念及结构2.1概念2.2现实中的二叉树2.3 特殊的二叉树2.4 二叉树的性质2.5 二叉树的存储结构 1.树概念及结构 1.…...
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…...
Linux7安装mysql数据库以及navicat远程连接mysql
1.下载地址：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…...
FFmpeg命令分隔视频
有一个视频如a.mp4，此视频采用帧率为30生成，共有299帧，这里通过FFmpeg命令分隔成1秒一个个的小视频，即每个小视频帧数为30帧。 用到的FFmpeg参数如下所示： (1).-i:指定输入视频文件的名称； (2).-c:指…...
开源与闭源
我的观点： 开源与闭源软件都有各自的优势和劣势，没有绝对的对错之分。.. 一、开源和闭源的优劣势比较 开源的好处与劣处 优势： 创新与合作：开源软件能够吸引更多的开发者参与到项目中来，促进创新和合作。开放的源代码…...
详解Python对Excel处理
Excel是一种常见的电子表格文件格式，广泛用于数据记录和处理。Python提供了多个第三方库，可以方便地对Excel文件进行读写、数据操作和处理。本文将介绍如何使用Python对Excel文件进行处理，并提供相应的代码示例和详细说明。 一、安装第三方库…...
docker compose搭建渗透测试vulstudy靶场示例
前言 渗透测试（Penetration test）即网络安全工程师/安全测试工程师/渗透测试工程师通过模拟黑客，在合法授权范围内，通过信息搜集、漏洞挖掘、权限提升等行为，对目标对象进行安全测试（或攻击）&am…...
Python基础教程:强大的Pandas数据分析库
Pandas是一个基于 NumPy 的非常强大的开源数据处理库，它提供了高效、灵活和丰富的数据结构和数据分析工具，当涉及到数据分析和处理时，使得数据清洗、转换、分析和可视化变得更加简单和高效。本文中，我们将学习如何使用Pandas来处理…...
【深入剖析K8s】容器技术基础（一）：从进程开始说起
容器其实是一种特殊的进程而已。 可执行镜像 为了能够让这些代码正常运行’我们往往还要给它提供数据’比如我们这个加法程序所需要的输人文件这些数据加上代码本身的二进制文件放在磁盘上’就是我们平常所说的一个程序,也叫代码的可执行镜像（executablejmage&…...
Mysql使用周期性计划任务定时备份，发现备份的文件都是空的？为什么？如何解决？
👨🎓博主简介 🏅云计算领域优质创作者 🏅华为云开发者社区专家博主 🏅阿里云开发者社区专家博主 💊交流社区：运维交流社区 欢迎大家的加入！ 🐋 希望大家多多支…...
算法leetcode｜90. 子集 II（rust重拳出击）
文章目录 90. 子集 II：样例 1：样例 2：提示： 分析：题解：rust：go：c：python：java： 90. 子集 II： 给你一个整数数组 nums ，其…...
git 泄露
得到flag有两种方法： 1、版本比对：git diff 用法：git diff <分支名1> <分支名2> 2、版本回退：git reset 用法：git reset --hard <分支名> python2 GitHack.py http://www.example.com/.git/ g…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面，开源代码 作为一个电子罗盘模块，我们可以通过I2C从中获取偏航角yaw，相对于六轴陀螺仪的yaw，qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增：通道注意力模块（SE模块） class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述：iview使用table 中type: "index",分页之后 ，索引还是从1开始，试过绑定后台返回数据的id, 这种方法可行，就是后台返回数据的每个页面id都不完全是按照从1开始的升序，因此百度了下，找到了…...
关键领域软件测试的突围之路：如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...
代码规范和架构【立芯理论一】（2025.06.08）
1、代码规范的目标 代码简洁精炼、美观，可持续性好高效率高复用，可移植性好高内聚，低耦合没有冗余规范性，代码有规可循，可以看出自己当时的思考过程特殊排版，特殊语法，特殊指令，必须…...
WEB3全栈开发——面试专业技能点P7前端与链上集成
一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染（SSR）与静态网站生成（SSG） 框架，由 Vercel 开发。它简化了构建生产级 React 应用的过程，并内置了很多特性： ✅ 文件系…...
在RK3588上搭建ROS1环境：创建节点与数据可视化实战指南
在RK3588上搭建ROS1环境：创建节点与数据可视化实战指南 背景介绍完整操作步骤1. 创建Docker容器环境2. 验证GUI显示功能3. 安装ROS Noetic4. 配置环境变量5. 创建ROS节点（小球运动模拟）6. 配置RVIZ默认视图7. 创建启动脚本8. 运行可视化系统效果展示与交互技术解析ROS节点通…...
ArcGIS Pro+ArcGIS给你的地图加上北回归线！
今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。 我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等，设置经线、纬线都以10间隔显示。 2、需要插入背会归线…...
五、jmeter脚本参数化
目录 1、脚本参数化 1.1 用户定义的变量 1.1.1 添加及引用方式 1.1.2 测试得出用户定义变量的特点 1.2 用户参数 1.2.1 概念 1.2.2 位置不同效果不同 1.2.3、用户参数的勾选框 - 每次迭代更新一次 总结用户定义的变量、用户参数 1.3 csv数据文件参数化 1、脚本参数化 …...
HTML版英语学习系统
HTML版英语学习系统 这是一个完全免费、无需安装、功能完整的英语学习工具，使用HTML CSS JavaScript实现。 功能 文本朗读练习 - 输入英文文章，系统朗读帮助练习听力和发音，适合跟读练习，模仿学习；实时词典查询 - 双…...