码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • vue 如果2个/多个过滤器(filter)同时使用并传参数?


    html:

    1. <div>{{19.9866666|formatNum_mod}}div>
    2. <div>{{19.9866666|formatNum_mod(4)}}div>

    js:

    1. //vue 文件中,js部分
    2. import { formatNum_mod } from '@/utils/public'
    3. export default {
    4. filters: {
    5. formatNum_mod(val,nums_after_point) {
    6. console.log(val,nums_after_point)// 传入值(4),则输出:19.9866666,4
    7. return formatNum_mod(val,nums_after_point)
    8. }
    9. }

    (utils下的)  public.js 文件:

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

    tips:

    • html中传入的4(虽然在参数的第一位),但在vue文件中的js部分,会赋值给filter中的 nums_after_point参数,而sumCount值会赋给filter中 的val参数。所以console.log打印出来的是
  • 相关阅读:
    将文件移动到ubuntu/linux/centos虚拟机上
    260. 只出现一次的数字 III
    LeetCode 209 长度最小的子数组
    golang面试题:对未初始化的的chan进行读写,会怎么样?为什么?
    爆款,阿里内部精选DevOps实践手册,高质量满满,仅分享三天
    【C++11】weak_ptr智能指针使用详解
    Java的方法重载、变量和值传递
    前端1+x考证:上篇
    PayPal不同提交模式的区别介绍
    .NET Core Web APi类库如何内嵌运行?
  • 原文地址:https://blog.csdn.net/Shimeng_1989/article/details/126711194
  • 最新文章
  • 沪漂五周年了:我越来越迷茫了
    Agentic Skill Routing 实战:别再把所有 Skill 塞进 AI Agent 上下文
    MySQL-Seconds_behind_master的精度误差
    [MAF预定义ChatClient中间件-03]CachingChatClient——利用缓存省钱省时间
    AI的至暗历史:从万众期待到被政府撤资,AI的两次死亡徘徊
    Agent OS :五种驯服不确定性的范式
    PortSwigger SQL注入LAB11
    数据库即时编译JIT
    [Begin]AI Learn Data Day 0
    深度学习进阶(二十七)现代 LLM 的核心架构设计其二:SwiGLU
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
小工具 小游戏
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1

京公网安备 11010502049817号