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

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

news 2026/3/29 10:25:32

本书目录：点击进入

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

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

OpenClaw飞书机器人：Qwen3-VL:30B多模态应用指南

OpenClaw飞书机器人&#xff1a;Qwen3-VL:30B多模态应用指南 1. 为什么选择OpenClawQwen3-VL:30B组合&#xff1f; 去年冬天&#xff0c;当我第一次尝试用AI助手处理团队飞书群里的图片报销单时&#xff0c;经历了惨痛的失败——要么识别错金额&#xff0c;要么把同事的午餐照…...

编程新知 2026/3/29 8:01:34

美团天天神券自动化脚本终极指南：告别手动抢券，每月轻松省下200元

美团天天神券自动化脚本终极指南&#xff1a;告别手动抢券&#xff0c;每月轻松省下200元 【免费下载链接】meituan-shenquan 美团 天天神券 地区活动 自动化脚本 项目地址: https://gitcode.com/gh_mirrors/me/meituan-shenquan 你是否经常在11点、17点、21点这三个关键…...

编程新知 2026/3/29 6:32:26

LAV Filters：让Windows播放任何视频格式的5大优势与安装教程

LAV Filters&#xff1a;让Windows播放任何视频格式的5大优势与安装教程 【免费下载链接】LAVFilters LAV Filters - Open-Source DirectShow Media Splitter and Decoders 项目地址: https://gitcode.com/gh_mirrors/la/LAVFilters 你是否曾经遇到过在Windows电脑上无法…...

编程新知 2026/3/29 6:04:22

【Spring 面试突击 · 03】大厂高频面试题：从IoC容器底层原理到Spring Boot自动配置解析

目录 一、Spring Boot如何启动Tomcat&#xff1f; 二、Spring Boot配置文件加载顺序 三、MyBatis的优缺点 四、Hibernate与MyBatis的区别 五、Spring Context模块的理解 六、什么是Spring依赖注入&#xff1f; 七、什么是Spring Bean&#xff1f; 八、Spring AOP与Aspec…...

编程新知 2026/3/29 5:05:46

如何用Dify工作流引擎解决多平台内容分发效率难题

如何用Dify工作流引擎解决多平台内容分发效率难题 【免费下载链接】Awesome-Dify-Workflow 分享一些好用的 Dify DSL 工作流程&#xff0c;自用、学习两相宜。 Sharing some Dify workflows. 项目地址: https://gitcode.com/GitHub_Trending/aw/Awesome-Dify-Workflow 当…...

编程新知 2026/3/29 5:01:45

从Hightec/TASKING到ADS：手把手教你迁移AURIX工程并优化编译配置

1. 为什么需要从Hightec/TASKING迁移到ADS&#xff1f; 对于使用AURIX系列芯片的开发者来说&#xff0c;Hightec和TASKING这两个商业IDE一直是主流选择。但最近几年&#xff0c;越来越多的开发者开始转向英飞凌官方推出的AURIX Development Studio&#xff08;ADS&#xff09;&…...

编程新知 2026/3/29 4:19:03

PDE建模技术在油水两相流及离散裂缝模型中的应用：深入探讨Comsol石油工程中的关键概念

comsol石油工程 pde油水两相流 pde油水离散裂缝两相流概念模型附赠视频讲解和推导过程 采用PDE建模当油和水在岩石孔隙里掐架石油工程里最头疼的问题之一就是油水两相流。想象一下&#xff0c;地下的油像挤牙膏一样被水推着走&#xff0c;结果要么水窜得太快把油路截断&#xf…...

编程新知 2026/3/29 4:12:58

LangChain RAG实战：用PGVector把你的本地知识库变成智能问答机器人（Python代码详解）

LangChain RAG实战&#xff1a;用PGVector把你的本地知识库变成智能问答机器人&#xff08;Python代码详解&#xff09; 你是否曾经面对堆积如山的本地文档感到无从下手&#xff1f;PDF报告、Markdown笔记、TXT日志散落在各个文件夹&#xff0c;每次查找关键信息都像大海捞针。…...

编程新知 2026/3/29 4:02:52

springboot-vue+nodejs大学生社团管理系统

目录技术栈选择系统模块划分开发阶段安排部署与优化测试重点项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作技术栈选择 后端采用Spring Boot框架&#xff0c;提供RESTful API接口&#xff0c;处理业务逻辑与数据库交互。 前端…...

编程新知 2026/3/29 2:54:17

PROJECT MOGFACE效果对比：不同提示词（Prompt）工程下的输出质量

PROJECT MOGFACE效果对比&#xff1a;不同提示词&#xff08;Prompt&#xff09;工程下的输出质量 你是不是也遇到过这种情况&#xff1f;用同一个AI模型&#xff0c;别人生成的回答妙语连珠&#xff0c;你得到的却平平无奇。问题可能就出在那几句“悄悄话”——提示词上。 今…...

编程新知 2026/3/29 2:32:10