应用场景:在数据渲染之前,使用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);
网友评论