vue 列表过滤

最新推荐文章于 2024-05-16 10:38:04 发布
最新推荐文章于 2024-05-16 10:38:04 发布
阅读量510 收藏 2
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MCCLS/article/details/118771296
版权

用一个案例大致解释下：

这边要进行一个模糊查询

输入一个冬,则只显示上面俩个 

也就是说,把100条数据根据你的输入只显示出6条这就是一种过滤

要输入一个字时,下面就要发生改变所以就是一个v-model的双向绑定

用watch实现：

 这边使用了

indexOf（）

不包含则返回-1包含则返回对应的索引值

filter过滤方法中,它是不会该变数组的,会新生成出一个数组,而这还没有对新生成的数组进行调用

 

原数据不能更改所以要定义一个filPersons

前面的插值对象也要换成filPersons属性

 

 

 

但是这样还是有问题由于filPersons的初始为空,.所以显示也为空

但是不影响搜索的功能

 当全部删除输入的信息

发现空字符串查找都能进行查找的到

 所以以为默认框为空字符串所以只需要进行对watch属性加上immediate:true

表示,一开始进行一次侦听

代码注释小技巧：加region 和endregion

 

用计算属性：computed实现

用计算属性

当第一次调用时,此时输入框为空,则keyword为空,则输入全部的数据

当输入框输入数据则keyword改变则再次触发计算属性.即计算属性的依赖属性改变则计算属性也进行再次调用,实现了模糊查询

 

 

 

 

 

 

兜里揣着星星
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
vue 的指令与过滤器
酷爱前端的小陈博客
04-15 2801
1. 指令的概念 指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。 vue 中的指令按照不同的用途可以分为如下 6 大类： ① 内容渲染指令 ② 属性绑定指令 ③ 事件绑定指令 ④ 双向绑定指令 ⑤ 条件渲染指令 ⑥ 列表渲染指令 注意：指令是vue 开发中最基础、最常用、最简单的知识点。 1.1 内容渲染指令 内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个： 1、v-text...
vue实现表格过滤功能
10-16
- `<ul>`和`<li>`：用于渲染过滤后的书籍列表。`v-for`指令遍历`filterBooks`计算属性中的每一项，并将其显示出来。 - 排序按钮：通过`@click`事件监听器调用`setOrderType`方法，改变`orderType`的值以切换排序...
vue 删除数组、list中的元素 filter
weixin_43337481的博客
10-08 1427
let data=[{id:1,name:'张三'},{id:2,name:'李四'},{id:3,name:'王五'}];//index 当前元素索引；1：需要删除的元素个数。方法一：使用 filter过滤。if(item.name=='张三')方法二：使用 splice 移除。
Vue-列表过滤
最新发布
m0_73839298的博客
05-16 404
什么是列表过滤？什么是列表过滤？
Vue——列表过滤
weixin_47412580的博客
08-19 2273
列表的过滤操作
vue过滤出去不带某个字段的对象
weixin_43703816的博客
06-05 269
使用hasOwnProperty这个方法即可，object.hasOwnProperty()其中data.SC为一个数组。
【vue】Vue中的filter()用法
热门推荐
qq_44727978的博客
04-25 2万+
前台数据处理。超详细的小白教程filter()
vue实现搜索过滤效果
10-16
当用户输入时，我们可以实时更新过滤后的数据列表。以下是一个简单的实现示例： ```html 搜索" @input="filterData"> new Vue({ data() { return { searchText: '', slist: [/*原始数据数组*/], }; }, ...
vue的过滤器filter实例详解
12-09
排版记录，点耽误时间，我就简单的来，下面是一个vue 过滤器的写法，demo 演示，限制一个字符串的长度。 vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html 下面就具体拿自己的一个例子介绍： ...
vue实现购物车列表
10-15
在本示例中，我们看到一个使用Vue.js框架实现的购物车列表。Vue.js是一个流行的JavaScript库，用于构建用户界面，特别适合构建单页应用程序（SPA）。以下是对这个购物车列表实现的关键知识点的详细说明： 1. **Vue...
web前端vue filter 过滤器
08-28
Vue Filter 过滤器详解 Vue filter 过滤器是 Vue 框架中的一种功能强大且灵活的工具，常用于文本格式化处理。今天，我们将详细介绍 Vue filter 过滤器的使用方法和方式。 什么是 Vue Filter 过滤器？ Vue filter ...
vue2过滤器模糊查询方法
12-29
如下所示： <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> </head> <body> <div id=app> <input type=text v-model='search' /> <ul v-for=item> <li>{{item.name}},价格:￥{{item.price}}</li> </ul> </div> [removed][removed] [removed] var vm =
vue列表列表过滤
libingjiedd的博客
04-14 487
对已知的列表进行数据过滤(根据输入框里面的内容进行数据过滤)
Vue技术—列表过滤
u013140948的博客
12-24 903
面试题：react、vue中的key有什么租用？（key的内部原理） <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyworld"> <ul> <li v-for="(p,index) in filpersons" :key="p.id"> {{p.name}}-{{p.age}}-{{p.sex}} &
vue如何实现列表过滤
m0_62276354的博客
04-26 315
列表过滤常常用在搜索上 比较常用实现的是watch和计算属性实现接下来我们先用一组假数据来实现一下效果。
Vue收集表单数据
李公子的博客
07-29 428
收集表单数据： 若：<inputtype="text"/>，则v-model收集的是value值，用户输入的就是value值。 若：<inputtype="radio"/>，则v-model收集的是value值，且要给标签配置value值。 若：<inputtype="checkbox"/> 1.没有配置input的valu...
Django 中 get 和 filter 方法的区别
Wonz
09-14 778
Django 中 get 和 filter 方法的区别
es 查询含有filter过滤查询和不含有filter查询
sxf_123456的博客
03-08 7417
GET gather-033_112000/_search{  "size": 0,  "query": {    "range": {      "memrate": {        "gte": 0,        "lte": 100      }    }  }}GET gather-033_112000/_search{  "size": 0,  &quot
Vue（三）：样式绑定、条件渲染、列表渲染、列表过滤与列表排序
m0_73560798的博客
03-11 913
绑定样式：1.class样式写法：class="xxx”xxx可以是字符串、对象、数组。字符串写法适用于：类名不确定，要动态获取。对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。2.style样式:style="{fontSize:xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。1、用于展示列表数据。
vue列表过滤实验内容
05-25
假设我们有一个包含以下数据的列表： ```javascript [ { id: 1, name: 'John Doe', age: 25, city: 'New York' }, { id: 2, name: 'Jane Smith', age: 30, city: 'Los Angeles' }, { id: 3, name: 'Bob Johnson', age: 35, city: 'Chicago' }, { id: 4, name: 'Sarah Lee', age: 28, city: 'San Francisco' }, { id: 5, name: 'Tom Brown', age: 32, city: 'Boston' }, ] ``` 我们想要实现一个搜索功能，可以通过输入关键字来过滤列表。我们可以用Vue的计算属性来实现这个功能。 首先，在data中定义一个名为`searchText`的变量，用于保存用户输入的关键字。然后，在template中添加一个输入框和一个列表，用于展示过滤后的结果。 ```html <template> <div> <input type="text" v-model="searchText"> <ul> <li v-for="item in filteredList" :key="item.id">{{ item.name }} ({{ item.age }})</li> </ul> </div> </template> ``` 接下来，我们需要编写一个计算属性来实现列表的过滤。我们将其命名为`filteredList`。在计算属性中，我们使用`filter`方法来过滤列表。对于每个列表项，我们检查其`name`或`city`属性是否包含用户输入的关键字。如果是，则将其添加到一个新的数组中，并返回该数组作为过滤后的列表。 ```javascript computed: { filteredList() { return this.list.filter(item => { return item.name.toLowerCase().includes(this.searchText.toLowerCase()) || item.city.toLowerCase().includes(this.searchText.toLowerCase()); }); } } ``` 完整代码如下： ```html <template> <div> <input type="text" v-model="searchText"> <ul> <li v-for="item in filteredList" :key="item.id">{{ item.name }} ({{ item.age }})</li> </ul> </div> </template> <script> export default { data() { return { searchText: '', list: [ { id: 1, name: 'John Doe', age: 25, city: 'New York' }, { id: 2, name: 'Jane Smith', age: 30, city: 'Los Angeles' }, { id: 3, name: 'Bob Johnson', age: 35, city: 'Chicago' }, { id: 4, name: 'Sarah Lee', age: 28, city: 'San Francisco' }, { id: 5, name: 'Tom Brown', age: 32, city: 'Boston' }, ] }; }, computed: { filteredList() { return this.list.filter(item => { return item.name.toLowerCase().includes(this.searchText.toLowerCase()) || item.city.toLowerCase().includes(this.searchText.toLowerCase()); }); } } } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值