VUE中利用Computed+filter对数据进行筛选

5 篇文章 0 订阅

话不多说上代码:

需求:tasks中是组件从外部获取的数据,要根据文本框中taskName的值把task中名字符合的显示出来
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
大佬使用了一个Array.filter()方法,根据条件创建出来一个新数组。MDN链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
其中的!this.taskName是为了在没有搜索条件的时候默认显示全部,因为taskNam的默认值为null,若不多加判断,则数据默认显示为空。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js ,`watch`、`computed`和`filter` 都是用来处理数据的常用方式。 - `watch`:用于监听一个特定的数据变化,当该数据发生变化时执行相应的操作。`watch` 可以监听一个表达式或一个函数返回值,并在数据变化时执行回调函数。`watch` 通常用于监听数据变化后执行异步操作或复杂的数据处理。 - `computed`:用于计算和返回一个新的数据,当依赖的数据发生变化时自动更新。`computed` 可以监视依赖的数据,当依赖的数据发生变化时,自动更新计算属性的值,因此不需要手动监听数据变化。`computed` 通常用于计算多个数据的复杂逻辑。 - `filter`:用于过滤一个数组数据,返回一个新的数组。`filter` 接收一个回调函数,该回调函数返回一个布尔值,用于指示是否保留该数据。`filter` 通常用于从一组数据筛选需要的数据。 举个例子,如果有一个 `data` 包含一个 `name` 和一个 `age` 属性,我们可以使用 `watch` 监听 `name` 和 `age` 的变化,并在它们发生变化时执行某些操作: ``` watch: { name: function(newValue, oldValue) { // name 发生变化了 }, age: function(newValue, oldValue) { // age 发生变化了 } } ``` 如果我们想根据 `name` 和 `age` 计算一个新的属性 `fullName`,我们可以使用 `computed`: ``` computed: { fullName: function() { return this.name + ' ' + this.age; } } ``` 如果我们有一个数组 `users` 包含多个用户对象,我们可以使用 `filter` 过滤出年龄大于等于 18 的用户: ``` computed: { adultUsers: function() { return this.users.filter(function(user) { return user.age >= 18; }); } } ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值