vue3 封装千分位分隔符自定义指令

toLocaleString作用:在没有指定区域的基本使用时,返回使用默认的语言环境和默认选项格式化的字符串。可点击进入MDN查看

// 千分位分隔符指令
import { Directive, DirectiveBinding } from 'vue'const thousandSeparator: Directive = {mounted(el: any, binding: DirectiveBinding) {// 获取文本const value = el.innerTextif (value && !isNaN(Number(value))) { // 判断文本是不是数字// 对其进行转化el.innerText = Number(value).toLocaleString('en-US')}},updated(el: any, binding: DirectiveBinding) {const value = el.innerTextif (value && !isNaN(Number(value))) {el.innerText = Number(value).toLocaleString('en-US')}}
}export default {thousandSeparator
}//在mian.ts中注册指令import { createApp, Directive } from 'vue'
import pinia from './store/index'
import i18n from './i18n'
import router from './router/index'
import App from './App.vue'
// 引入指令文件
import directives from '@/utils/directives'const app = createApp(App)
app.use(pinia).use(i18n()).use(router).mount('#app')//  注册指令
Object.keys(directives).forEach(key => {//Object.keys() 返回一个数组,值是所有可遍历属性的key名app.directive(key, (directives as { [key: string]: Directive })[key]) //key是自定义指令名字;后面应该是自定义指令的值
})

效果
在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/98508.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

git中的cherry-pick和merge有些区别以及cherry-pick怎么用

git中的cherry-pick和merge在使用场景上有些区别: cherry-pick用于将另一个分支的某一次或几次commit应用到当前分支。它可以选择性地拉取代码修改。merge用于将两个分支合并成一个新分支。它会把整个分支上的所有修改都合并过来。 具体区别:cherry-pick通常用于将bug修复从发…

QT中闹钟的设置

.h文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPushButton> //按钮 #include <QTextEdit> //文本 #include <QLabel> //标签 #include <QLineEdit> //行编辑器#include <QTimerEvent> //定时器事件类头文件 #…

02-Linux-IO多路复用之select、poll和epoll详解

前言&#xff1a; 在linux系统中&#xff0c;实际上所有的 I/O 设备都被抽象为了文件这个概念&#xff0c;一切皆文件&#xff0c;磁盘、网络数据、终端&#xff0c;甚至进程间通信工具管道 pipe 等都被当做文件对待。 在了解多路复用 select、poll、epoll 实现之前&#xff…

快速学会git版本管理——上传gitee仓库

首先在gitee右上角有一个新建仓库 创建之后打开自己想要上传的文件 右键打开 Git Bash Here 接下来会弹出git的窗口 首先先初始化仓库 用git命令 git init 然后用git add . 上传所有文件上传到暂存区(上一篇文章说过add是单个文件&#xff0c;add . 是所有文件) 没有显示错误 …

java-方法

java定义方法如果没有返回值&#xff0c;那么就不需要定义返回值 如果有返回值则需要在定义方法时定义返回值和类型。 #无返回值 无返回值要加关键字void&#xff0c;不用加关键字return public static void printHelloWorld(){for (int i 0; i < 3; i) {System.out.pr…

Linux常用命令——csplit命令

在线Linux命令查询工具 csplit 将一个大文件分割成小的碎片文件 补充说明 csplit命令用于将一个大文件分割成小的碎片&#xff0c;并且将分割后的每个碎片保存成一个文件。碎片文件的命名类似“xx00”&#xff0c;“xx01”。csplit命令是split的一个变体&#xff0c;split只…

FPGA输出lvds信号点亮液晶屏

1 概述 该方案用于生成RGB信号&#xff0c;通过lvds接口驱动逻辑输出&#xff0c;点亮并驱动BP101WX-206液晶屏幕。 参考&#xff1a;下面为参考文章&#xff0c;内容非常详细。Xilinx LVDS Output——原语调用_vivado原语_ShareWow丶的博客http://t.csdn.cn/Zy37p 2 功能描述 …

java八股文面试[JVM]——如何打破双亲委派模型

双亲委派模型的第一次“被破坏”是重写自定义加载器的loadClass(),jdk不推荐。一般都只是重写findClass()&#xff0c;这样可以保持双亲委派机制.而loadClass方法加载规则由自己定义&#xff0c;就可以随心所欲的加载类&#xff0c;典型的打破双亲委派模型的框架和中间件有tomc…

深度学习-4-二维目标检测-YOLOv5理论模型详解

YOLOv5理论模型详解 1.Yolov5四种网络模型 Yolov5官方代码中&#xff0c;给出的目标检测网络中一共有4个版本&#xff0c;分别是Yolov5s、Yolov5m、Yolov5l、Yolov5x四个模型。 YOLOv5系列的四个模型&#xff08;YOLOv5s、YOLOv5m、YOLOv5l、YOLOv5x&#xff09;在参数量和性…

【python基础知识】5.for循环和while循环

文章目录 前言for...in...循环语句for循环&#xff1a;空房间for循环&#xff1a;一群排队办业务的人range()函数for循环&#xff1a;办事流程 while循环while循环&#xff1a;放行条件while循环&#xff1a;办事流程 两种循环对比 前言 上一关&#xff0c;我们学习了两种新的…

Springboot 实践(13)spring boot 整合RabbitMq

前文讲解了RabbitMQ的下载和安装&#xff0c;此文讲解springboot整合RabbitMq实现消息的发送和消费。 1、创建web project项目&#xff0c;名称为“SpringbootAction-RabbitMQ” 2、修改pom.xml文件&#xff0c;添加amqp使用jar包 <!-- RabbitMQ --> <dependency&g…

Unity 中 Pivot 与 Center,重置模型物体的轴心为中心

文章目录 1. 概念2. 动态计算正确的模型中心点Center3. 重置模型物体的轴心为中心 1. 概念 在 Unity 面板的左上角有两个按钮&#xff0c;在本文中主要研究 Pivot/Center Pivot&#xff08;轴心&#xff09;&#xff1a;模型的真实位置&#xff0c;是由建模软件设定的可在模…