美文网首页
vue 千分符显示指令

vue 千分符显示指令

作者: 辉色星空下 | 来源:发表于2023-07-30 13:44 被阅读0次
Vue.directive("thousand", {
  // 被绑定元素插入父节点时调用
  inserted: function(el, binding) {
    //字符在元素内部的元素中且id=thousand
    //两种写法
    /**如:
     * <div vThousand>
     *    <span id="thousand">
     *      {row.businessUnitPriceExcludingTax?.toFixed(2) || ""}
     *    </span>
     *</div>
     **/
    //字符就在当前元素中
    /**如:
     * <div vThousand>
     *      {row.businessUnitPriceExcludingTax?.toFixed(2) || ""}
     *</div>
     **/
    let thousand = el.querySelector("#thousand");
    const setThousand = () => {
      if (thousand && thousand.innerText) {
        thousand.innerText = parseFloat(thousand.innerText).toLocaleString(
          "zh",
          {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
          }
        );
      } else if (el.innerText) {
        el.innerText = parseFloat(el.innerText).toLocaleString("zh", {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        });
      }
    };
    setThousand();
  }
});

相关文章

  • vue指令概览

    大纲 1、什么是vue指令2、向指令中传入参数3、指令中带入修饰符4、指令的缩写5、常见的vue指令5.1、v-m...

  • vue指令概览

    原文 博客原文 大纲 1、什么是vue指令2、向指令中传入参数3、指令中带入修饰符4、指令的缩写5、常见的vue指...

  • 浮点类型加千分符和还原为浮点类型

    浮点类型加千分符 去掉千分符,变为浮点类型

  • vue事件、指令、钩子

    vue事件、指令、钩子 vue的事件修饰符:.stop:阻止冒泡.prevent:阻止默认行为.capture:捕...

  • 开发技巧-数字千分符

    在开发中遇到了一个问题,显示钱数的时候,需要显示千分符.数字在 Swift 中我们可以在定义时进行添加分割符.但是...

  • vue学习-基础,事件和数据交互

    vue数据双向绑定(v-model)原理? vue指令 v-text === {{}} {{}} 页面会显示变量...

  • Vue-day3

    Vue常用指令 修饰符 表单修饰符 v-model.lazy:change事件,失去焦点才改变.number ①限...

  • 实例学习vue.js目录

    目录 入门篇 初识vue vue基础指令 vue实例:标语大作战 事件修饰符 双向数据绑定 使用v-for遍历数据...

  • 项目中的一些常用公共方法 - swift3.1

    1. 数据显示格式的转换 - 千分位分隔符显示数据 2. 将字符串替换*号 - 隐藏显示的数据 3. 获取随机颜色...

  • Vue杂记

    vue应用结构 vue-router 是占位符,放在需要显示...

网友评论

      本文标题:vue 千分符显示指令

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