vue filter 过滤器 {{ | }}

vue filter 过滤器，用于过滤或格式化代码，使用 {{ | }} 插值表达式操作

示例中：

• filtersMethods(‘自定义过滤参数’) 为过滤方法
• 过滤器中第一个参数默认为被过滤的对象，如 item.count
• 若需要自定义过滤参数，在 {{ | }} 过滤方法中传递即可，多个参数用 “,” 隔开
• 若需要多个过滤方法，如 {{ 对象 | 过滤方法1 | 过滤方法2 }}，其中后面过滤方法参数是前一个过滤方法结果

案例一：格式化金额

<template>
  <section>
    <ul>
      <li 
        v-for="(item, index) in list" 
        :key="item.id"
      >
        {{ item.count | filtersMethods() }}
      </li>
    </ul>
  </section>
</template>

<script>
export default{
  name: 'Home',
  data () {
    return {
      list: [
        { id: 1, count: 10500 },
        { id: 2, count: 1500 },
        { id: 3, count: 20030 },
      ]
    }
  },
  filters: {
    // 第一个参数，默认为被过滤的对象
    filtersMethods (val) {
      if(val >= 10000){
        return `${val / 10000}万`
      } else {
        return `${val}元`
      }
    }
  }
}
</script>

案例二：过滤出金额 >= 10000 的数组项

<template>
  <section>
    <ul>
      <li 
        v-for="(item, index) in list" 
        :key="item.id"
      >
        {{item | filtersMethods(item.count)}}
      </li>
    </ul>
  </section>
</template>

<script>
export default{
  name: 'Home',
  data () {
    return {
      list: [
        { id: 1, count: 10500 },
        { id: 2, count: 1500 },
        { id: 3, count: 20030 },
      ]
    }
  },
  filters: {
    // 第一个参数，默认为被过滤的对象
    filtersMethods (item, val) {
      if(val >= 10000){
        return item
      }
    }
  }
}
</script>

～～～ 也可以在 methods 中自定义过滤方法 filter