vue中的filter()函数的用法

filter函数基本格式:let newArr=this.list.filter(item=>item.id!==val)
首先在这里我们要知道的两个基础知识
一、filter是一个过滤器。
二、箭头函数filter(item=>item.id!==val)相当于filter(item){item.code!==val}

其中list是数组,this.list.filter()是指在list数组中,过滤掉item.id!==val条件的数组项,newArr代表得到条件为item.id不等于val的时候的数组,相当于数组中删除了item.idval的项。

//举例
//定义一个数组,有3条数据
 list = [
  {
    id: 1,
    name: '吃饭',
    done: true
  },
  {
    id: 2,
    name: '睡觉',
    done: false
  },
  {
    id: 3,
    name: '打豆豆',
    done: false
  }
]
//删除id为2的数组项,得到新的数组
let newArr = this.list.filter(item=>item.id!==2);  //[{id: 1,name: '吃饭',done: true},{id: 3,name: '打豆豆',done: false}]

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js filter 函数是用来格式化或转换数据的函数,类似于 JavaScript 的 Array.prototype.filter() 函数filter 函数可以接收一个值作为输入,并返回一个经过处理后的新值。 filter 函数通常用在模板,用于对数据进行格式化或转换,例如将日期格式化为特定的字符串,将数字格式化为货币格式,将字符串进行截取等。 filter 函数用法如下: 1. 在 Vue 实例定义 filter 函数: ``` var app = new Vue({ el: '#app', data: { message: 'Hello World' }, filters: { uppercase: function (value) { if (!value) return '' value = value.toString() return value.toUpperCase() } } }) ``` 在上面的例子,我们定义了一个名为 uppercase 的 filter 函数,用于将字符串转换为大写字母。在模板使用该 filter 函数的方法如下: ``` <div id="app"> <p>{{ message | uppercase }}</p> </div> ``` 2. 在模板直接定义 filter 函数: ``` <div id="app"> <p>{{ message | uppercase }}</p> </div> <script> Vue.filter('uppercase', function (value) { if (!value) return '' value = value.toString() return value.toUpperCase() }) var app = new Vue({ el: '#app', data: { message: 'Hello World' } }) </script> ``` 在上面的例子,我们将 filter 函数直接定义在模板,并使用 Vue.filter() 来注册该 filter 函数。 需要注意的是,在 Vue.js 2.0 filter 函数已经被废弃,取而代之的是计算属性和方法。推荐使用计算属性和方法来进行数据的格式化和转换。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值