vue 如果2个/多个过滤器(filter)同时使用并传参数?

html:

<!-- 无参数 ,页面显示 19.98-->
<div>{{19.9866666|formatNum_mod}}</div>

<!-- 需要传参数 ,页面显示 19.9866-->
<div>{{19.9866666|formatNum_mod(4)}}</div>

js:

//vue 文件中,js部分
import {  formatNum_mod  } from '@/utils/public'

export default {
filters: {
    formatNum_mod(val,nums_after_point) {
        console.log(val,nums_after_point)// 传入值(4),则输出:19.9866666,4
        return formatNum_mod(val,nums_after_point)
    }
}


(utils下的)  public.js 文件:


// utils下的 public.js 文件,如下:

// 千分位 : formatNum_mod(1234567893.99)。 nums_after_point:截取到小数点后nums_after_point位(不四舍五入,直接截断),默认后两位)
export function formatNum_mod(number, nums_after_point = 2) {
  if (!number) return ''
  let n = Number(number).toFixed(2).toString();
  let r = '';
  let temp = '';
  let mod = '';
  // v=  Number(f).toFixed(2);
  do {
    // 求模的值, 用于获取高三位,这里可能有小数
    mod = n % 1000;
    // 值是不是大于1,是继续的条件
    n = n / 1000;
    // 高三位
    temp = ~~mod;
    // 1.填充: n > 1 循环未结束, 就要填充为比如 1 => 001
    // 不然temp = ~~mod的时候, 1 001, 就会变成 "11"
    // 2.拼接“,”
    r = (n >= 1 ? `${temp}`.padStart(3, '0') : temp) + (!!r ? ',' + r : '');
  } while (n >= 1);
  const strNumber = number + '';
  let index = strNumber.indexOf('.');
  // 拼接小数部分
  if (index >= 0) {
    r += strNumber.substring(index, index + nums_after_point + 1); // 截取到小数点后两位, (因为小数点占一位,所以后面要+1)
  }
  return r;
}

tips:

  • html中传入的4(虽然在参数的第一位),但在vue文件中的js部分,会赋值给filter中的 nums_after_point参数,而sumCount值会赋给filter中 的val参数。所以console.log打印出来的是
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值