filter(过滤器)--Vue

Vue可以自定义过滤器，可被用对要显示的数据进行特定格式化后再显示 ( 适用于一些简单的逻辑处理 )。

一、语法:

1、注册过滤器

(1) Vue.filter (name , callback)  //全局

(2) new Vue({                            //局部

        filters: { }

})

2、过滤器可以用在两个地方：

(1)双花括号插值  :

        {{xxx | 过滤器}}

{{ actors | parseActors(30) }}

actors 是待处理的数据 , 就是parseActors的第一个形参对应的实参

30 其实对应的是parseActors的第二个实参

过滤器管道符前面的表达式的结果会被作为默认实参传递给管道符后面的过滤器

 | : 在过滤器中称为管道符

(2)v-bind 表达式 (从 2.1.0+ 开始支持):

        v-bind:属性='xxx | 过滤器'

<template>
    <div>
        <!-- <div>主演 : {{ actors | parseActors}}</div> -->
        <div>主演 : {{ actors | parseActors(30)}}</div>
    </div>
</template>

<script>
const actors = [
  { id: 11, name: '刘德华' },
  { id: 22, name: '张阿发' },
  { id: 33, name: '张三丰' },
  { id: 44, name: '郭富城' }

]
export default {
  data () {
    return {
      actors
    }
  },
  /**
   * 定义一个过滤器,通过filters属性
   * 在vue3中已经废除
   */
  filters: {
    // 根据业务需求写过滤器的方法体
    // parseActors (data) {
    //   if (data.length > 0) {
    //     let str = ''
    //     data.forEach(item => {
    //       str += item.name + ' '
    //     })
    //     return str
    //   } else {
    //     return '暂无'
    //   }
    // }
    parseActors (data, pos) {
      if (data.length > 0) {
        let str = ''
        data.forEach(item => {
          if (item.id > pos) {
            str += item.name + ' '
          }
        })
        return str
      } else {
        return '暂无'
      }
    }
  }
}
</script>

<style>

</style>

注意:

(1) 定义一个过滤器,通过filters属性 , 在vue3中filter已经废除 , 使用methods、computed代替 ;

(2) 至少有一个形参 , 这个形参就是需要进行格式化处理的数据 (格式是任意的)  ;

(3) 过滤器可以接收额外的参数 , 多个过滤器可以串联 ;

(4)实参和形参的数量在表现上是不一样的 , 如果实参有 n 个 , 那么形参有n+1个 , 第一个形参是需要处理的数据 , 后面的形参与实参一一对应 ;

(5) 必须有返回值 ;

(6) 过滤器并没有改变原来的数据 , 是产生新的对应数据。