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

【Vue3】2-12 : 【案例】搜索关键词加筛选条件的综合

news 2026/2/7 12:09:39

本书目录：点击进入

一、【案例】搜索关键词加筛选条件的综合

1.1、逻辑

1.2、效果

1.3、json数据 - 02-data.json

1.4、代码

一、【案例】搜索关键词加筛选条件的综合

1.1、逻辑

  • 计算属性 - 绑定list，并过滤

  • input  双向绑定 - 当input改变时，计算属性过滤name

  • button组 双向绑定 - 当input改变时，计算属性过滤性别

1.2、效果

1.3、json数据 - 02-data.json

[{"id": 1,"name": "小明","gender": "女","age": 20},{"id": 2,"name": "小强","gender": "男","age": 18},{"id": 3,"name": "大白","gender": "女","age": 25},{"id": 4,"name": "大红","gender": "男","age": 22}
]

1.4、代码

<body><div id="app"><input type="text" v-model="message"><button :class="activeGender('全部')" @click="handleGender('全部')">全部</button><button :class="activeGender('男')" @click="handleGender('男')">男</button><button :class="activeGender('女')" @click="handleGender('女')">女</button><ul><li v-for="item in filterList" :key="item.id">{{ item.name }}, {{ item.gender }}, {{ item.age }}</li></ul></div><script>let vm = Vue.createApp({data() {return {list: [],message: '',gender: '全部'}},created(){fetch('./02-data.json').then((res)=> res.json()).then((res)=>{this.list = res;})},computed: {filterList(){return this.list.filter((v)=> v.name.includes(this.message)).filter((v)=> v.gender === this.gender || '全部' === this.gender);}},methods: {activeGender(gender){return { 'active-gender': this.gender === gender };},handleGender(gender){this.gender = gender;}}}).mount('#app');</script>
</body>

相关文章：

【Vue3】2-12 : 【案例】搜索关键词加筛选条件的综合

本书目录&#xff1a;点击进入 一、【案例】搜索关键词加筛选条件的综合 1.1、逻辑 1.2、效果 1.3、json数据 - 02-data.json 1.4、代码 一、【案例】搜索关键词加筛选条件的综合 1.1、逻辑 计算属性 - 绑定list&#xff0c;并过滤 input 双向绑定 - 当input改变时&…...

编程日记 2024/1/15 1:24:47

unity小程序websocket：nginx配置https (wss)转http (ws)及其他问题解决

目录 前言 实际运用场景 处理流程如下 nginx配置ssl和wss 配置过程中遇到的问题 1、无法连接服务器 2、通过IP可以访问&#xff0c;域名却不行 问题描述 解决 3、如何判断该域名是否备案了 前言 为了服务器网络的通用性&#xff0c;我们在实现移动端的游戏转微信小程序…...

编程日记 2024/1/15 1:22:45

MySql数据库对接Orcal数据库，需要考虑的前提问题

1.主表 从表的表关系&#xff1b;主键id 的关联问题&#xff1b; 2.字段类型的一致性问题&#xff08;备注&#xff1a;像varchar类型的一点要谨防数据过长抛错&#xff09;&#xff1b; 3.实体类字段两表一致性问题&#xff1b; 4.入表不为空问题&#xff0c;判空尽量在实体…...

编程日记 2024/1/15 1:21:45

K8S的存储卷---数据卷

容器内的目录和宿主机的目录进行挂载 容器在系统上的生命周期是短暂的。delete&#xff0c;K8S用控制器创建的pod&#xff0c;delete相当于重启&#xff0c;容器的状态也会恢复到初始状态。一旦回到初始状态&#xff0c;所有的后天编辑的文件都会消失 容器和节点之间创建一个…...

编程日记 2024/1/15 1:20:43

【量化交易故事】小明开启了量化创业之旅-01

故事开始于2023年的春天&#xff0c;小明是一位对金融市场充满热情的IT工程师。在经历了数次基于主观判断和个人情绪进行投资却收获平平后&#xff0c;他意识到传统交易方式中的人为因素难以避免&#xff0c;而这往往成为影响投资决策稳定性和准确性的关键障碍。在一次偶然的机…...

编程日记 2024/1/15 1:18:42

ffmpeg写YUV420文件碰到阶梯型横线或者条纹状画面的原因和解决办法

版权声明&#xff1a;本文为CSDN博主「文三~」的原创文章&#xff0c;遵循CC 4.0 BY-SA版权协议&#xff0c;转载请附上原文出处链接及本声明。 原文链接&#xff1a;https://blog.csdn.net/asdasfdgdhh/article/details/112831581 看到了&#xff0c;转载&#xff0c;留着备份…...

编程日记 2024/1/15 1:16:40

案例：新闻数据加载

文章目录 介绍相关概念相关权限约束与限制完整示例 代码结构解读构建主界面数据请求下拉刷新总结 介绍 本篇Codelab是基于ArkTS的声明式开发范式实现的样例&#xff0c;主要介绍了数据请求和touch事件的使用。包含以下功能&#xff1a; 数据请求。列表下拉刷新。列表上拉加载…...

编程日记 2024/1/15 1:15:39

数学的雨伞下：理解世界的乐趣

这本书没有一个公式&#xff0c;却讲透了数学的本质&#xff01; 《数学的雨伞下&#xff1a;理解世界的乐趣》。一本足以刷新观念的好书&#xff0c;从超市到对数再到相对论&#xff0c;娓娓道来。对于思维空间也给出了一个更容易理解的角度。 作者&#xff1a;米卡埃尔•洛奈…...

编程日记 2024/1/15 1:14:38

补充 vue3用户管理权限（路由控制）

之前有人问我 &#xff0c;如果是二级路由如何添加&#xff0c;这里我做一个补充吧。直接拿方法去用就行。也不做解释了。稍微看下就能看懂了 假设&#xff0c;后端返回给我们一个数据 [“/defa”,"/defa/defa1"] 这样的一个路由表&#xff0c;我们就需要通过这个路…...

编程日记 2024/1/15 1:09:34

C++ 深度优先搜索DFS || 模版题：排列数字

给定一个整数 n &#xff0c;将数字 1∼n 排成一排&#xff0c;将会有很多种排列方法。 现在&#xff0c;请你按照字典序将所有的排列方法输出。 输入格式 共一行&#xff0c;包含一个整数 n 。 输出格式 按字典序输出所有排列方案&#xff0c;每个方案占一行。 数据范围 1…...

编程日记 2024/1/15 1:08:33

计算机找不到msvcp120.dll如何解决？总结五个可靠的教程

在计算机使用过程中&#xff0c;遇到“找不到msvcp120.dll”这一问题常常令人困扰。msvcp120.dll作为Windows系统中至关重要的动态链接库文件&#xff0c;对于许多应用程序的正常运行起着不可或缺的作用。那么&#xff0c;究竟是什么原因导致找不到msvcp120.dll呢&#xff1f;又…...

编程日记 2024/1/15 1:07:32

法线变换矩阵的推导

背景 在冯氏光照模型中&#xff0c;其中的漫反射项需要我们对法向量和光线做点乘计算。 从顶点着色器中读入的法向量数据处于模型空间&#xff0c;我们需要将法向量转换到世界空间&#xff0c;然后在世界空间中让法向量和光线做运算。这里便有一个问题&#xff0c;如何将法线…...

编程日记 2024/1/15 1:06:31

React.Children.map 和 js 的 map 有什么区别？

JavaScript 中的 map 不会对为 null 或者 undefined 的数据进行处理&#xff0c;而 React.Children.map 中的 map 可以处理 React.Children 为 null 或者 undefined 的情况。 React 空节点&#xff1a;可以由null、undefined、false、true创建 import React from reactexport …...

编程日记 2024/1/15 1:05:30

13.Kubernetes部署Go应用完整流程：从Dockerfile到Ingress发布完整流程

本文以一个简单的Go应用Demo来演示Kubernetes应用部署的完整流程 1、Dockerfile多阶段构建 Dockerfile多阶段构建 [root@docker github]# git clone https://gitee.com/yxydde/http-dump.git [root@docker github]# cd http-dump/ [root@docker http-dump]# cat Dockerfile …...

编程日记 2024/1/15 1:04:29

叉车车载终端定制_基于MT6762安卓核心板的车载终端设备方案

叉车车载终端是一款专为叉车车载场景设计的4英寸Android车载平板电脑。它采用了高能低耗的8核ARM架构处理器和交互开放的Android 12操作系统&#xff0c;算力表现强大。此外&#xff0c;该产品还具备丰富的Wi-Fi-5、4G LTE和蓝牙等通讯功能&#xff0c;可选配外部车载蘑菇天线&…...

编程日记 2024/1/15 1:02:27

【CSS】保持元素宽高比

保持元素的宽高比&#xff0c;在视频或图片展示类页面是一个重要功能。 本文介绍其常规的实现方法。 实现效果 当浏览器视口发生变化时&#xff0c;元素的尺寸随之变化&#xff0c;且宽高比不变。 代码实现 我们用最简单的元素结构来演示&#xff0c;实现宽高比为4&#xf…...

编程日记 2024/1/15 0:59:23

使用 Docker 和 Diffusers 快速上手 Stable Video Diffusion 图生视频大模型

本篇文章聊聊&#xff0c;如何快速上手 Stable Video Diffusion (SVD) 图生视频大模型。 写在前面 月底计划在机器之心的“AI技术论坛”做关于使用开源模型 “Stable Diffusion 模型” 做有趣视频的实战分享。 因为会议分享时间有限&#xff0c;和之前一样&#xff0c;比较简…...

编程日记 2024/1/15 0:57:21

C++ namespace高级用法

高级用法 C++中的命名空间（namespace）是一种用于组织代码的机制，它可以帮助避免命名冲突，并使代码更加清晰和易于维护。以下是C++命名空间的一些高级用法： 嵌套命名空间：命名空间可以嵌套在其他命名空间中，形成一个层次结构。嵌套命名空间可以进一步细化命名空间，使其更…...

编程日记 2024/1/15 0:55:19

如何允许远程访问 MySQL

前些天发现了一个人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;最重要的屌图甚多&#xff0c;忍不住分享一下给大家。点击跳转到网站。 如何允许远程访问 MySQL 现在许多网站和应用程序一开始的 Web 服务器和数据库后端都托管在同一台计算机上。随着…...

编程日记 2024/1/15 0:52:16

PostgreSQL认证考试PGCA、PGCE、PGCM

PostgreSQL认证考试PGCA、PGCE、PGCM 【重点&#xff01;重点&#xff01;重点&#xff01;】PGCA、PGCE、PGCM 直通车快速下正&#xff0c;省心省力&#xff0c;每2个月一次考试 PGCE考试通知 &#xff08;2024&#xff09; 一、考试概览 &#xff08;一&#xff09; 报名要…...

编程日记 2024/1/15 0:51:15

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2026/2/5 15:43:28

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2026/2/5 4:25:15

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2026/1/24 14:59:08

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2026/1/25 13:13:20

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/12/23 11:20:24

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...

编程新知 2026/2/5 4:25:58

c# 局部函数 定义、功能与示例

C# 局部函数&#xff1a;定义、功能与示例 1. 定义与功能 局部函数&#xff08;Local Function&#xff09;是嵌套在另一个方法内部的私有方法&#xff0c;仅在包含它的方法内可见。 • 作用&#xff1a;封装仅用于当前方法的逻辑&#xff0c;避免污染类作用域&#xff0c;提升…...

编程新知 2025/9/18 4:17:51