Vue过滤器

1、全局过滤器

src
|   
-- filter  
    |
    ---- index.js           //导出相关配置
复制代码

index.js

export function toThousandslsFilter(num) {
  return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
}
复制代码

main.js

import * as filters from './filters'
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})
复制代码

2、组件内部过滤器

<div id="app">
    <div v-for="(item,index) in arr" :key="index">
      <div>{{ item.name }}</div>
      <div>原始数据：{{ item.test }}</div>
      <div>过滤数据：{{ item.test | filterData }}</div>
      <div>过滤器串联：{{ item.name | joinFilter1 | joinFilter2 }}</div>
      <div> 过滤器接受参数：{{ item.test | acceptValue('+参数2+','参数3') }}</div>
    </div>
  </div>

//在组件script中的用法:
<script>
const vm = new Vue({
  el: "#app",
  data: {
    arr: [
      {
        name: "OBKoro1",
        test: 1
      },
      {
        name: "OBKoro1",
        test: 2
      },
      {
        name: "OBKoro1",
        test: 3
      },
      {
        name: "OBKoro1",
        test: 4
      }
    ]
  },
  filters: {
    filterData(value) {
      switch (value) {
        case 1:
          return "数据1";
          break;
        case 2:
          return "数据2";
          break;
        case 3:
          return "数据3";
          break;
        case 4:
          return "数据4";
          break;
        default:
          return "";
      }
    },
    joinFilter1(val) {
      console.log(val, "1");
      return "Koro1";
    },
    joinFilter2(val) {
      console.log(val);
      if (val === "Koro1") {
        return "obkoro1";
      }
    },
    acceptValue(val1, val2, val3) {
      // val1 参数是默认传进来的数据
      console.log(val1, val2, val3);
      return val1 + val2 + val3;
    }
  }
});
</script>
复制代码

使用方法

在html模板中的两种用法：

 <!-- 在双花括号中 -->
    {{ message | filterTest }}
<!-- 在 `v-bind` 中 -->
    <div :id="message | filterTest"></div>
复制代码

转载于:https://juejin.im/post/5c46d33ff265da6164144f3c