vue3 实现多条件搜索

最新推荐文章于 2024-03-28 17:13:20 发布
最新推荐文章于 2024-03-28 17:13:20 发布
阅读量855 收藏 1
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64590669/article/details/134404368
版权

 

目录

前言

用法

1. 数据绑定和事件处理

 2. 列表渲染和条件过滤

 解析

完整代码

整体总结：

前言

在现代的前端开发中，Vue.js 是一个非常流行的 JavaScript 框架，用于构建用户界面。Vue 提供了一种简洁的方式来构建交互式和动态的网页应用。在这个例子中，我们将探讨如何使用 Vue 3 和 Composition API 来创建一个简单的搜索功能，允许用户根据不同的条件过滤和显示数据。

用法

在这个例子中，我们有一个包含多个订单信息的数组 `data`。每个订单都有一个 ID、昵称、手机号、标题等属性。我们提供了四个输入框，允许用户输入 ID、昵称、手机号和标题的搜索条件。根据用户的输入，订单列表将实时更新以显示匹配的结果。

1. 数据绑定和事件处理

使用 `v-model` 指令，我们可以创建双向数据绑定，将输入框的值绑定到 Vue 实例的数据属性上。当输入框的值发生变化时，绑定的数据属性也会相应地更新。

<input id="searchId" v-model="searchId" placeholder="ID" />
<input id="searchNickname" v-model="searchNickname" placeholder="Nickname" />
<input id="searchTel" v-model="searchTel" placeholder="Tel" />
<input id="searchTitle" v-model="searchTitle" placeholder="Title" />

在这里，`searchId`、`searchNickname`、`searchTel` 和 `searchTitle` 都是响应式的数据属性，它们的初始值都设置为空字符串。

 2. 列表渲染和条件过滤

使用 `v-for` 指令，我们可以遍历 `data` 数组，并为数组中的每个元素渲染一个列表项。 

<ul>
  <li v-for="item in filteredData" :key="item.id">
    ID: {{ item.id }}, 名称: {{ item.nickname }}, 手机号: {{ item.tel }}, Title: {{ item.title }}
  </li>
</ul>

在这里，`filteredData` 是一个计算属性，它基于 `data` 和搜索条件来返回过滤后的订单列表。使用 `Array.prototype.filter` 方法，我们可以根据用户输入的搜索条件来过滤订单列表。

const filteredData = computed(() => {
  return data.value.filter(item => {
    return (
      (!searchId.value || item.id.toString().includes(searchId.value)) &&
      (!searchNickname.value || item.nickname.toLowerCase().includes(searchNickname.value.toLowerCase())) &&
      (!searchTel.value || item.tel.includes(searchTel.value)) &&
      (!searchTitle.value || item.title.toLowerCase().includes(searchTitle.value.toLowerCase()))
    );
  });
});

在这个计算属性中，我们检查每个订单的 ID、昵称、手机号和标题是否包含用户输入的搜索条件。如果用户没有输入搜索条件，或者订单的相应属性包含搜索条件，则该订单会被包含在过滤后的结果中。 

 解析

这个例子展示了 Vue 3 和 Composition API 的强大功能，提供了一种简洁和声明式的方式来构建动态和响应式的用户界面。

 1. **响应式数据**: 使用 `ref` 函数，我们可以创建响应式的数据属性。当这些属性的值发生变化时，Vue 会自动更新 DOM，确保用户界面与数据保持同步。

2. **计算属性**: 使用 `computed` 函数，我们可以创建依赖于响应式数据的计算属性。计算属性的值会根据其依赖的数据自动更新，并且它们是惰性求值的，只有在需要时才会重新计算。 

3. **双向数据绑定**: 使用 `v-model` 指令，我们可以实现输入框和 Vue 实例数据之间的双向数据绑定。这使得实现表单和用户输入的处理变得非常简单和直观。 

4. **条件渲染和列表渲染**: 使用 `v-if`、`v-else-if`、`v-else` 和 `v-for` 指令，我们可以根据数据的状态在 DOM 中渲染不同的内容或列表。 

5. **事件处理**: Vue 也提供了一种简洁的方式来处理用户输入和其他 DOM 事件。 

通过这个例子，我们可以看到 Vue 3 和 Composition API 提供了一种非常高效和灵活的方式来构建复杂的用户界面，使得开发者能够以声明式的方式描述用户界面应该如何根据数据的变化来更新，而不是手动操作 DOM。这不仅使得代码更加简洁和易于理解，也提高了开发效率和应用性能。

完整代码

<template>
  <div>
    <div>
      <label for="searchId">ID:</label>
      <input id="searchId" v-model="searchId" placeholder="ID" />
    </div>
    <br>
    <div>
      <label for="searchNickname">名称:</label>
      <input id="searchNickname" v-model="searchNickname" placeholder="Nickname" />
    </div>
    <br>
 
    <div>
      <label for="searchTel">手机号:</label>
      <input id="searchTel" v-model="searchTel" placeholder="Tel" />
    </div>
    <br>
 
    <div>
      <label for="searchTitle">TiTle:</label>
      <input id="searchTitle" v-model="searchTitle" placeholder="Title" />
    </div>
    <br>
 
    <ul>
      <li v-for="item in filteredData" :key="item.id">
        ID: {{ item.id }}, 名称: {{ item.nickname }}, 手机号: {{ item.tel }}, Title: {{ item.title }}
      </li>
    </ul>
  </div>
</template>
 
<script setup>
import { ref, computed } from 'vue';
 
const data = ref([
		{
			"id": 89,
			"shopid": 13,
			"userid": 21,
			"total": "99.00",
			"num": "1",
			"ord_num": "2023092410299525",
			"create_time": "2023-09-24 19:52:47",
			"status": 1,
			"nickname": "昵称",
			"tel": "12372272611",
			"title": "11苹果11双卡全面屏苹果手机",
			"price": "99.00",
			"info": "推荐购买"
		},
		{
			"id": 88,
			"shopid": 13,
			"userid": 21,
			"total": "99.00",
			"num": "1",
			"ord_num": "2023092499519710",
			"create_time": "2023-09-24 08:48:44",
			"status": 1,
			"nickname": "昵称",
			"tel": "12372272611",
			"title": "11苹果11双卡全面屏苹果手机",
			"price": "99.00",
			"info": "推荐购买"
		},
		{
			"id": 87,
			"shopid": 13,
			"userid": 21,
			"total": "99.00",
			"num": "1",
			"ord_num": "2023092497515653",
			"create_time": "2023-09-24 08:44:42",
			"status": 1,
			"nickname": "昵称",
			"tel": "12372272611",
			"title": "11苹果11双卡全面屏苹果手机",
			"price": "99.00",
			"info": "推荐购买"
		},
		{
			"id": 86,
			"shopid": 13,
			"userid": 21,
			"total": "99.00",
			"num": "1",
			"ord_num": "2023092457100101",
			"create_time": "2023-09-24 08:44:41",
			"status": 1,
			"nickname": "昵称",
			"tel": "12372272611",
			"title": "11苹果11双卡全面屏苹果手机",
			"price": "99.00",
			"info": "推荐购买"
		},
		{
			"id": 85,
			"shopid": 13,
			"userid": 21,
			"total": "99.00",
			"num": "1",
			"ord_num": "2023092448101101",
			"create_time": "2023-09-24 08:40:32",
			"status": 1,
			"nickname": "昵称",
			"tel": "12372272611",
			"title": "11苹果11双卡全面屏苹果手机",
			"price": "99.00",
			"info": "推荐购买"
		},
		{
			"id": 84,
			"shopid": 9,
			"userid": 21,
			"total": "1",
			"num": "1",
			"ord_num": "2023092456545351",
			"create_time": "2023-09-24 07:53:12",
			"status": 1,
			"nickname": "昵称",
			"tel": "12372272611",
			"title": "魅鹰视力机德国技术a波光谱眼部按摩仪护眼仪儿童近散眼轴学生",
			"price": "1",
			"info": "儿童养眼"
		},
		{
			"id": 83,
			"shopid": 9,
			"userid": 21,
			"total": "1",
			"num": "1",
			"ord_num": "2023092448101545",
			"create_time": "2023-09-24 07:44:16",
			"status": 1,
			"nickname": "昵称",
			"tel": "12372272611",
			"title": "魅鹰视力机德国技术a波光谱眼部按摩仪护眼仪儿童近散眼轴学生",
			"price": "1",
			"info": "儿童养眼"
		},
		{
			"id": 82,
			"shopid": 3,
			"userid": 2,
			"total": "1",
			"num": "1",
			"ord_num": "2023091456535451",
			"create_time": "2023-09-14 14:46:16",
			"status": 1,
			"nickname": "冰海恋雨",
			"tel": "15225928729",
			"title": "顺丰包邮10斤混合组合混搭新鲜水果进口车厘子礼盒装中秋送礼高端",
			"price": "999",
			"info": "非常热爆"
		},
		{
			"id": 81,
			"shopid": 1,
			"userid": 4,
			"total": "10",
			"num": "1",
			"ord_num": "2023091310156515",
			"create_time": "2023-09-13 07:46:06",
			"status": 1,
			"nickname": "李四",
			"tel": "15225928720",
			"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
			"price": "10",
			"info": "AJ"
		},
		{
			"id": 80,
			"shopid": 1,
			"userid": 9,
			"total": "10",
			"num": "1",
			"ord_num": "2023091251571024",
			"create_time": "2023-09-12 23:36:03",
			"status": 1,
			"nickname": "志昂张",
			"tel": "17839859856",
			"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
			"price": "10",
			"info": "AJ"
		},
		{
			"id": 79,
			"shopid": 1,
			"userid": 4,
			"total": "10",
			"num": "1",
			"ord_num": "2023091210297569",
			"create_time": "2023-09-12 18:55:59",
			"status": 1,
			"nickname": "李四",
			"tel": "15225928789",
			"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
			"price": "10",
			"info": "AJ"
		},
		{
			"id": 78,
			"shopid": 1,
			"userid": 4,
			"total": "10",
			"num": "1",
			"ord_num": "2023091249101575",
			"create_time": "2023-09-12 18:38:09",
			"status": 1,
			"nickname": "李四",
			"tel": "15223245720",
			"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
			"price": "10",
			"info": "AJ"
		},
		{
			"id": 77,
			"shopid": 1,
			"userid": 4,
			"total": "10",
			"num": "1",
			"ord_num": "2023091253575549",
			"create_time": "2023-09-12 18:37:41",
			"status": 1,
			"nickname": "李四",
			"tel": "15225943230",
			"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
			"price": "10",
			"info": "AJ"
		},
		{
			"id": 76,
			"shopid": 1,
			"userid": 4,
			"total": "10",
			"num": "1",
			"ord_num": "2023091297971021",
			"create_time": "2023-09-12 18:16:58",
			"status": 1,
			"nickname": "李四",
			"tel": "152123420",
			"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
			"price": "10",
			"info": "AJ"
		},
		{
			"id": 75,
			"shopid": 10,
			"userid": 4,
			"total": "13.8",
			"num": "1",
			"ord_num": "2023091210255505",
			"create_time": "2023-09-12 18:14:55",
			"status": 1,
			"nickname": "李四",
			"tel": "1524567720",
			"title": "紫薯新鲜9斤农家蜜薯板栗香红沙地薯地瓜糖心蔬菜山芋小番薯包邮",
			"price": "13.8",
			"info": "紫薯新鲜9斤农家蜜薯板栗香红沙地薯地瓜糖心蔬菜山芋小番薯包邮"
		},
		{
			"id": 74,
			"shopid": 4,
			"userid": 4,
			"total": "1",
			"num": "1",
			"ord_num": "2023091210048559",
			"create_time": "2023-09-12 18:14:37",
			"status": 1,
			"nickname": "李四",
			"tel": "15267898720",
			"title": "正版 华晨宇同款李宁防泼水外套 | 2023秋季新款开衫防风运动服男女款",
			"price": "1",
			"info": "好穿不贵"
		},
		{
			"id": 73,
			"shopid": 1,
			"userid": 4,
			"total": "10",
			"num": "1",
			"ord_num": "2023091250501011",
			"create_time": "2023-09-12 17:44:18",
			"status": 1,
			"nickname": "李四",
			"tel": "15225456720",
			"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
			"price": "10",
			"info": "AJ"
		},
		{
			"id": 72,
			"shopid": 1,
			"userid": 4,
			"total": "10",
			"num": "1",
			"ord_num": "2023091210048491",
			"create_time": "2023-09-12 17:42:53",
			"status": 1,
			"nickname": "李四",
			"tel": "15225928720",
			"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
			"price": "10",
			"info": "AJ"
		}
 
]);
 
const searchId = ref('');
const searchNickname = ref('');
const searchTel = ref('');
const searchTitle = ref('');
 
const filteredData = computed(() => {
  return data.value.filter(item => {
    return (
      (!searchId.value || item.id.toString().includes(searchId.value)) &&
      (!searchNickname.value || item.nickname.toLowerCase().includes(searchNickname.value.toLowerCase())) &&
      (!searchTel.value || item.tel.includes(searchTel.value)) &&
      (!searchTitle.value || item.title.toLowerCase().includes(searchTitle.value.toLowerCase()))
    );
  });
});
</script>

整体总结：

数据绑定： 使用Vue的数据绑定，将搜索条件与Vue实例中的数据进行关联。可以使用v-model指令将输入框的值绑定到数据中。

监听搜索条件变化： 使用Vue的watch特性或者计算属性computed监听搜索条件的变化。这样可以在条件发生变化时触发相应的操作，比如执行搜索。

  1. 执行搜索操作： 当搜索条件发生变化时，执行搜索逻辑。这可以是调用API，发送HTTP请求，或者在本地数据集合中进行过滤。

  2. 条件组合和过滤： 如果有多个搜索条件，可以将这些条件组合起来，然后根据这些条件来过滤数据。这可以使用JavaScript的条件语句、数组的filter方法或其他适当的方法来实现。

以上是实现多条件搜索的基本原理，具体实现可能根据项目的需求和使用的技术栈有所不同。 

 

冰海恋雨.
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue实现前端列表多条件筛选
01-18
本文实例为大家分享了vue实现前端列表多条件筛选的具体代码，供大家参考，具体内容如下 1、先上图： 2、搜索条件绑定的数据是： filterForm:{ schoolName:'',//输入的学校名称 position:'',//选择的区域区域 schoolLevel:,//选择的学校办别 }, schoolList:[ {schoolName:'青岛市实验高级中学',schoolLevel:,position:'山东省青岛市城阳区硕阳路69号'}, {schoolName:'山东省青岛第二中学',schoolLevel:,position:'山东省青岛市崂山区松岭路
vue实现搜索功能
12-29
本文实例为大家分享了vue实现搜索功能的具体代码，供大家参考，具体内容如下 methods (要有一定的触发条件才能执行，如点击事件) <input type=text name= id= placeholder=搜索 v-model=search/> <button @click=btn>搜索</button> {{list.name}} {{list.date}}<
vue3 保姆级教程 搜索文字高亮（setup）
最新发布
wcx18731346627的博客
03-28 658
div @click="onSearch">搜索-- 使用v-html显示搜索数据 -->placeholder="请输入搜索关键词"-- 搜索结果 -->-- 搜索框 -->//指定要替换的文本。
vue实现条件叠加搜索的解决方法
10-16
主要为大家详细介绍了vue实现条件叠加搜索的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现多条件和模糊搜索功能
10-16
主要为大家详细介绍了vue实现多条件和模糊搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【VUE项目实战】26、实现用户信息搜索功能
程序猿之洞
12-18 7429
接上篇《25、实现用户状态的修改》 上一篇我们实现了用户状态的修改效果，本篇我们来实现用户的搜索功能。 我们要实现，当用户在搜索框中输入用户的姓名后，点击搜索按钮，可以从数据库中查询到相应的用户信息： 首先我们需要将文本框和我们data中的数据进行双向绑定，绑定完毕之后在点击放大镜按钮的时候，调用获取用户列表的函数，进行数据的查询即可。 首先我们来做数据的双向绑定。这里我们在el-input中使用v-model绑定用户查询对象的queryinfo的query属性，然后找到查询按钮，使用click绑定查
vue3搜索功能
A12536365214的博客
07-29 2542
在Vue 3中实现搜索功能可以通过以下步骤进行。假设你已经有一个包含数据列表的组件，并且你想要在该列表中实现搜索功能。
Vue3 如何实现一个全局搜索框
qq_46617584的博客
02-02 1489
Vue3 如何实现一个全局搜索框
vue3实现列表搜索功能
合格程序猿
07-01 1458
3列表data的value等于datax的value。/**搜索数据 */
vue3实现搜索功能
lw934934的博客
06-27 4279
vue3通过双向数据绑定、filter过滤实现搜索功能
vue3 搜索框组件封装与功能实现
はんみん的博客
11-11 1289
vue3+ts 搜索框组件封装与功能实现
vue+element实现分页及条件搜索功能(纯前端分页).html
03-09
学习vue+element做用户条件分页查询遇到的坑! ps：(table :data 直接使用 list整个对象赋值，纯前端分页功能实现)!
vue2.0多条件搜索组件使用详解
08-30
主要为大家详细介绍了vue2.0多条件搜索组件的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue实现搜索结果高亮显示关键字
10-16
主要为大家详细介绍了Vue实现搜索结果高亮显示关键字，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue3+Element-Plus 实现表单中搜索功能 三五
热门推荐
码侬人生
12-27 1万+
1. 当用户在表单搜索框中，输入要搜索的用户名，点击搜索按钮后，查找到相对应的用户数据 2. 实现搜索功能的步骤 2.1 首先，使用v-model 指令，将文本输入框的数据与 data 中的数据做双向绑定 2.2 其次，为搜索按钮绑定单击事件，并调用事件函数。只要点击按钮，就发起一次查询请求。 2.2 接着，优化文本输入框，在文本框尾部添加清除功能，当用户点击清除后，文本框数据被重置（清空），同时触发一个事件，查询出所有的账户信息。 通过Input 事件，给当前文本框架...
[vue] 实现多条件筛选
qq_34450741的博客
03-06 1万+
大体效果图是这样的： ​​ 一、涉及的知识点： vue 组件化开发，不懂的可以参考vue 组件基础 ==》https://cn.vuejs.org/v2/guide/components.html es6 promise 模拟数据，参考 ==》http://es6.ruanyifeng.com/#docs/promise 其他： 1.可把组件单独放一个js文件里，通过script 引入即可。...
vue3搜索
weixin_42348009的博客
09-22 122
【代码】vue3搜索。
Vue3搭配Element Plus 实现候选搜索框效果
m0_65607651的博客
09-18 1061
Vue3搭配Element Plus 实现候选搜索框效果
vue3 数组多条件检索
05-31
在 Vue3 中，可以使用 Array.prototype.filter() 方法进行数组多条件检索。例如，假设有一个数组 arr，要按照多个条件对其进行过滤： ```javascript const arr = [ {name: 'Alice', age: 25, gender: 'female'}, {name: 'Bob', age: 30, gender: 'male'}, {name: 'Charlie', age: 20, gender: 'male'}, {name: 'David', age: 35, gender: 'male'}, {name: 'Eve', age: 28, gender: 'female'} ] // 多条件检索 const filteredArr = arr.filter(item => { return item.age > 25 && item.gender === 'male' }) console.log(filteredArr) // [{name: 'Bob', age: 30, gender: 'male'}, {name: 'David', age: 35, gender: 'male'}] ``` 上述代码中，使用 filter() 方法对数组进行过滤，返回符合条件的数组元素。在 filter() 方法的回调函数中，使用逻辑运算符 && 连接多个条件，实现多条件检索。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值