vue 全局过滤器(单个和多个过滤器)

Posted where there is a will, there i

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 全局过滤器(单个和多个过滤器)相关的知识,希望对你有一定的参考价值。

参考: https://www.cnblogs.com/liujn0829/p/8622960.html
https://blog.csdn.net/z8735058/article/details/76824548

一、单个过滤器

参考 https://cn.vuejs.org/v2/guide/filters.html

二、多个过滤器

新建dfilter.js文件

const dfilters = {
    addZeroTwo: function(value) {
        var value = Math.round(parseFloat(value) * 100) / 100;   //注: 一定要用var声明,let会报错
        var arr = value.toString().split(\'.\');
        if (arr.length === 1) {
            return value.toString() + \'.00\';
        } else {
            if (arr[1].length === 1) {
                return value.toString() + \'0\';
            }
        }
    },
    addZeroOne: function(value) {
        var value = Math.round(parseFloat(value) * 100) / 100;
        var arr = value.toString().split(\'.\');
        if (arr.length === 1) {
            return value.toString() + \'.0\';
        } else {
            if (arr[1].length === 1) {
                return value.toString() + \'0\';
            }
        }
    }
}
export default dfilters;

在main.js中引入并注册(在new Vue前注册)

import dfilters from \'../static/js/dfilters\';

for (let key in dfilters) {
    Vue.filter(key, dfilters[key]);
}

在组件中使用

<span>原价:¥{{shopgoods.gprice|addZeroTwo}}</span>

 

以上是关于vue 全局过滤器(单个和多个过滤器)的主要内容,如果未能解决你的问题,请参考以下文章

vue实现简单的过滤器

Vue定义全局过滤器filter

vue中的filter

vue.js总结第二天

vue过滤器

Vue——的全局过滤器的创建