码迷,mamicode.com
首页 > 其他好文 > 详细

vue中引入公用过滤器?

时间:2020-03-22 14:02:19      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:cti   ons   ref   index   class   spl   ++   export   rev   

比如我们封装一个金钱的过滤器:

 

技术图片不废话,直接上代码

 

在main.js平级新建filter文件夹,里面新建index.js和money.js

技术图片

 

index.js

import {
    moneyP
} from ‘./money‘

export default moneyP;

注意这里不要用module.exports导出了,会报错。

// module.exports = {
//     normalTime
// }

money.js里面

function fmoney(s){   
    let n = 2;
    n = n > 0 && n <= 20 ? n : 2;   
    s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";   
    var l = s.split(".")[0].split("").reverse(),   
    r = s.split(".")[1];   
    let t = "";   
    for(let i = 0; i < l.length; i ++ )   
    {   
       t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");   
    }   
    return t.split("").reverse().join("") + "." + r;   
 } 
 
export const moneyP = (num) => {
    if(num == 0) {
        let outnum = ‘0.00‘
        return outnum;
    } else {
        if(num != ‘‘) {
            if(num < 0) {
                let outnum = fmoney(-num)
                return ‘-‘ + outnum
            } else {
                let outnum = fmoney(num)
                return outnum
            }
        }
    }
}

在main.js里面引入:

//引入过滤器
import filters from ‘./filter‘
Vue.filter(‘moneyP‘,filters)

//Vue.filter(名字,函数)

使用时候在你的组件中直接用就可以了

 <div>{{numTotal | moneyP}}元</div>

扫码加群,每日更新一篇前端技术文章一起成长。

 

技术图片

 

vue中引入公用过滤器?

标签:cti   ons   ref   index   class   spl   ++   export   rev   

原文地址:https://www.cnblogs.com/bbqq1314/p/12545567.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!