Vue-17、Vue人员列表过滤(案例)

1、watch实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表渲染过滤</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root"><h2>人员列表</h2><input type="text" :placeholder="message" v-model="keyword"><ul><li v-for="p in persons2" :key="p.id">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul>
</div>
<script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",data:{message:'请输入名字搜索',keyword:'',persons:[{id:'1',name:'马冬梅',age:18,sex:'女'},{id:'2',name:'周冬雨',age:20,sex:'女'},{id:'3',name:'周杰伦',age:21,sex:'男'},{id:'4',name:'文兆伦',age:22,sex:'男'},],persons2:[],},watch:{keyword: {immediate:true,handler(newvalue){console.log(newvalue);const  arr = this.persons.filter((p)=>{return p.name.includes(newvalue);});this.persons2 = arr;}}}})
</script>
</body>
</html>

2、computed实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表渲染过滤computed实现</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root"><h2>人员列表</h2><input type="text" :placeholder="message" v-model="keyword"><ul><li v-for="p in persons2" :key="p.id">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul>
</div>
<script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",data:{message:'请输入名字搜索',keyword:'',persons:[{id:'1',name:'马冬梅',age:18,sex:'女'},{id:'2',name:'周冬雨',age:20,sex:'女'},{id:'3',name:'周杰伦',age:21,sex:'男'},{id:'4',name:'文兆伦',age:22,sex:'男'},],},computed:{persons2(){const arr = this.persons.filter((p)=>{return  p.name.includes(this.keyword);});return arr;}}})
</script>
</body>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/617986.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用pytorch给深度学习加速:正交与谱归一化技术

目录 torch.nn参数优化 parametrizations.orthogonal 用途 用法 使用技巧 参数 注意事项 示例代码 parametrizations.spectral_norm 用途 用法 使用技巧 参数 注意事项 示例代码 总结 torch.nn参数优化 parametrizations.orthogonal 这个torch.nn.utils.para…

谷歌浏览器访问微信内链接

一、打开谷歌浏览器f12开发者模式 二、点击网络&#xff0c;已停用节流模式&#xff0c;选择自定义添加 三、点击设备&#xff0c;添加自定义设备&#xff0c;天上名称&#xff0c;在用户代理字符串里填上下面代码 Mozilla/5.0 (Linux; Android 7.1.; MI Build/NMF26X; wv) A…

CCRC认证的级别以及办理条件

CCRC认证的级别 CCRC信息安全服务资质&#xff0c;分为三级&#xff0c;分别是一级、二级、三级&#xff0c;还包含7个类别。其中一级最高&#xff0c;三级最低&#xff0c;资质级别是衡量服务提供者服务能力的尺度。 三个级别介绍 一级资质&#xff1a;不仅对企业规模、业务…

JavaScript Web Worker用法指南

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》 ​ ​ ✨ 前言 Web Worker可以将耗时任务放到后台执行,避免阻塞UI。本文将详细介绍Web Worker的用法,让你…

【Leetcode】673.最长递增子序列的个数(Hard)

一、题目 1、题目描述 给定一个未排序的整数数组 nums , 返回最长递增子序列的个数 。 注意 这个数列必须是 严格 递增的。 示例1: 输入: [1,3,5,4,7] 输出: 2 解释: 有两个最长递增子序列,分别是 [1, 3, 4, 7] 和[1, 3, 5, 7]。示例2: 输入: [2,2,2,2,2] 输出: 5 解…

训练营四十五天 | ● 70. 爬楼梯 (进阶)● 322. 零钱兑换 ● 279.完全平方数

70. 爬楼梯 &#xff08;进阶&#xff09; 一次跨1-m个台阶为物品&#xff0c;共有n个台阶为背包容量&#xff0c;排列问题&#xff0c;完全背包 代码随想录 import java.util.*; public class Main { public static void main (String[] args) { Scanner sc new…

FineBI实战项目一(22):各省份订单个数及订单总额分析开发

点击新建组件&#xff0c;创建各省份订单个数及订单总额组件。 选择自定义图表&#xff0c;将province拖拽到横轴&#xff0c;将cnt和total拖拽到纵轴。 调节纵轴的为指标并列。 修改横轴和纵轴的标题。 修改柱状图样式&#xff1a; 将组件拖拽到仪表板。 结果如下&#xff1a;…

【专业英语】计算机专业英语(第三版)清华大学出版社

专业英语 部分专业名词 短语 在这里插入图片描述

FlinkCDC的分析和应用代码

前言&#xff1a;原本想讲如何基于Flink实现定制化计算引擎的开发&#xff0c;并以FlinkCDC为例介绍&#xff1b;发现这两个在表达上不知以谁为主&#xff0c;所以先分析FlinkCDC的应用场景和技术实现原理&#xff0c;下一篇再去分析Flink能在哪些方面&#xff0c;做定制化计算…

hostnamectl命令使用方法

hostnamectl命令是一个用于管理系统主机名的命令。它可以用于查看、设置和修改主机名、静态主机名和图标名称。 使用hostnamectl命令可以执行以下操作&#xff1a; 查看当前主机名&#xff1a;运行hostnamectl命令&#xff0c;它将显示当前主机名及相关信息&#xff0c;如静态…

U盘用完到底能不能直接拔?一篇搞懂

有没有人懂这种情况&#xff01;&#xff01; 传输完文件之后&#xff0c;觉得大功告成 以十分帅气的姿势 and 迅雷不及掩耳之势 “咻”地一下把U盘直接给……拔掉了…… 然后瞬间想起没有安全退出&#xff0c;陷入深深的懊悔…… &#xff08;甚至还要再花时间&#xff0…

linux系统nginx proxy做反向代理

Nginx Proxy代理 代理概念正向代理反向代理两者的区别 nginx Proxy 配置代理模块代理配置启用nginx proxy代理 代理概念 正向代理 正向代理的过程隐藏了真实的请求客户端&#xff0c;服务器不知道真实的客户端是谁&#xff0c;客户端请求的服务都被代理服务器代替请求。我们常…

WebServer 跑通/运行/测试(详解版)

&#x1f442; 椿 - 沈以诚 - 单曲 - 网易云音乐 目录 &#x1f382;前言 &#x1f33c;跑通 &#xff08;1&#xff09;系统环境 &#xff08;2&#xff09;克隆源码 &#xff08;3&#xff09;安装和配置 Mysql &#xff08;4&#xff09;写 sql 语句 &#xff08;5&…

IDM 用户帐号过期提醒

芯片设计环境通常有比较严格的安全管理&#xff0c;用户帐号过期后就不能登录环境&#xff0c;影响用户工作。为减少影响&#xff0c;应该提前向用户发送提醒&#xff0c;及时更新密码。 方案设计 通过IDM REST API接口获取所有帐号信息&#xff0c;根据以下条件过滤&#xf…

win11下载Hbuliderx 安装闪退解决教程+安装包分享

在官网下载 目录 在官网下载 出现闪退 下载失败 2.2. 最终在百度网盘里下载了历史版本 2.3. 然后解压文件 2.4. 双击打开 2.5. 安装成功 出现闪退 下载失败 结果下载失败&#xff0c;一下子弹出的下载框就会闪退 2.2. 最终在百度网盘里下载了历史版本 下载的网盘链接: …

黑马苍穹外卖学习Day5

文章目录 Redis学习Redis简介准备工作Redis常用数据类型介绍各数据类型的特点Redis常用命令字符串操作命令哈希操作命令列表操作命令集合操作命令有序集合操作命令通用操作命令 在Java中操作Redis导入Spring Data Redis坐标配置Redis数据源编写配置类&#xff0c;创建RedisTemp…

Scipy 中级教程——图像处理

Python Scipy 中级教程&#xff1a;图像处理 Scipy 的图像处理模块提供了许多功能&#xff0c;用于读取、处理和分析图像。在本篇博客中&#xff0c;我们将深入介绍 Scipy 中的图像处理功能&#xff0c;并通过实例演示如何应用这些工具。 1. 读取和显示图像 首先&#xff0c…

linux多进程基础(2):僵尸进程以及解决方法wait()函数(大白话解释)

在我的linux多线程多进程基础专栏中,已和大家一起分享了僵尸线程.在这一篇文章中我将分享僵尸进程以及解决方法wait()函数. 1.僵尸进程 什么是僵尸进程呢?用最通俗易懂的话来说就是子进程执行结束的时候其父进程并没有及时回收该子进程导致成为僵尸进程.如果僵尸进程数量较多…

【模型评估 06】超参数调优

对于很多算法工程师来说&#xff0c;超参数调优是一件非常头疼的事情。除了根据经验设定所谓的“合理值”之外&#xff0c;一般很难找到合理的方法去寻找超参数的最优取值。而与此同时&#xff0c;超参数对于模型效果的影响又至关重要。有没有一些可行的办法去进行超参数的调优…

10分钟快速搭建个人博客、文档网站!

本文来分享 8 个现代化前端工具&#xff0c;帮你快速生成个人博客、文档网站&#xff01; VitePress VitePress 是一款静态站点生成器&#xff0c;专为构建快速、以内容为中心的网站而设计。简而言之&#xff0c;VitePress 获取用 Markdown 编写的源内容&#xff0c;为其应用…