filter过滤器的使用

2020-10-03  本文已影响0人  张先觉

应用场景:在数据渲染之前,使用filter过滤器,进行二次加工处理。
注册时,Vue.filter('注册名', 处理方法),例如Vue.filter('my-filter', function (value) { return '返回处理后的值' })
使用时,例如{{ 3.1415926 | my-filter }}

# 注册一个保留两位有效数字的过滤器

|-- src
  |--filters  单独存放过滤器的文件,便于代码的管理和维护
    |-- index.js
    |-- tofixed.js   处理函数
  |--views 
    |-- index.vue 局部注册和使用
  |main.js 全局注册
#tofixed.js  一个文件单独写处理函数,便于管理

export default (value) => {
    return parseFloat(value).toFixed(3);
};
#index.js  统一导出filter

import tofixed from "./tofixed";
export { tofixed };
#index.vue 局部注册以及使用

<template>
  <div>
    {{ 3.1415926 | tofixed }}
  </div>
</template>

<script>
import { tofixed } from "@/filters/index.js";
export default {
  filters: {
    tofixed,
  },
};
</script>
#main.js 全局注册过滤器

import { tofixed } from "@/filters/index.js";
Vue.filter("tofixed", tofixed);
上一篇下一篇

猜你喜欢

热点阅读