简单说说vue过滤器filter

vue过滤器

• 过滤器作用：在某些值呈现给用户前做最后一步过滤，可被用于一些常见的文本格式化

• 过滤器使用范围：双花括号插值和 v-bind 表达式

• 过滤器形式： 分为 全局过滤器 和 私有过滤器

• 过滤器可以有参数，无参数，有多个参数

• 全局过滤器：必须在创建 Vue 实例之前全局定义过滤器

<div  v-for="item in list" :key="item.name"  class="text item">
          name:{{ item.name }} region: {{ item.region | lower(item.region)}}
        </div>
// 必须在创建 Vue 实例之前全局定义过滤器
Vue.filter('lower',function(msg) {return  msg.toLowerCase()})

• 私有过滤器：filters中的s千万不要忘记

<template>
<div class='main'>
        <div  v-for="item in list" :key="item.name"  class="text item">
          name:{{ item.name }} region: {{ item.region | lower(item.region)}}
        </div>
      </div>
</div>
</template>

<script>
export default {
// import引入的组件需要注入到对象中才能使用
  data() { // 这里存放数据
    return {
      list: []
    };
  },
  // 过滤集合 (s千万不要忘记)
  filters: {
    lower(msg) {
      return  msg.toLowerCase()
    }
</script>

• 过滤器可以串联：

  {{ message | filterA | filterB }}
  

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。