美文网首页
vue 全局过滤器(单个和多个过滤器)

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

作者: 前端召唤师 | 来源:发表于2019-04-26 11:42 被阅读0次

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

    一、单个过滤器

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

    二、多个过滤器

    1. 新建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;
    
    1. 在main.js中引入并注册(在new Vue前注册)
    import dfilters from '../static/js/dfilters';
    
    for (let key in dfilters) {
        Vue.filter(key, dfilters[key]);
    }
    
    1. 在组件中使用
    <span>原价:¥{{shopgoods.gprice|addZeroTwo}}</span>
    

    相关文章

      网友评论

          本文标题:vue 全局过滤器(单个和多个过滤器)

          本文链接:https://www.haomeiwen.com/subject/shdfnqtx.html