vue过滤器filters的使用

情景：

当你在v-for循环渲染一个数组对象的时候，是否遇到过这样的问题：对象里面的字段并不是直接渲染在页面中，而是需要把数据处理过后的内容显示在页面上。

使用：

1. 利用vue提供的filters钩子，实现数据的过滤处理再渲染处理过后的内容。：

 <ul>
   <li v-for="item in lists" :key="item.id">{{item.name | filterOne | filterTwo('同学')|filterThree('zhen的','很棒!') }}</li>
  </ul>

2. 创建过滤函数

data () {
    return {
      lists: [
        {name: 'zhangsan'},
        {name: 'lisi'},
        {name: 'wanger'},
        {name: 'liuwu'}
      ]
    }
  },
  filters: {
    filterOne (val) {
      return val.toUpperCase()
    },
    filterTwo (val, param) {
      return val + param
    },
    filterThree (val, pp, param) {
      return val + pp + param
    }
  },

3、过滤器操作完成，页面结果分析如下：

结果分析.png

vue过滤器补充：

• vue 过滤器不仅可以用在{{}}里面，也可以用在vue的生命周期中
  例如在methods的方法中使用：
  this.$options.filters ['filterOne'] ('zhangzhang') // []里面是过滤器名 ，（）里面是 参数

• vue过滤器还可以接收函数作为参数，如下：
  this.$options.filters ['filterOne'] ('zhangzhang'，this.fun('小zhai'))