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.mzph.cn/news/67298.shtml

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

相关文章

Win10搭建VisualSvn Server

Win10搭建VisualSvn Server 目录 Win10搭建VisualSvn Server一、下载VisualSvn Server安装包二、安装VisualSvn Server三、配置和使用VisualSVN Server四、添加用户及权限设定方法五、创建目录及配置权限 1、服务端:有集成了Subversion和Apache、安装使用非常简单且…

Redis从基础到进阶篇(三)----架构原理与集群演变

目录 一、缓存淘汰策略 1.1 LRU原理 1.2 案例分析 1.3 Redis缓存淘汰策略 1.3.1 设置最⼤缓存 1.3.2 淘汰策略 二、Redis事务 2.1 Redis事务典型应⽤—Redis乐观锁 2.2 Redis事务介绍 2.3 事务命令 2.3.1 MULTI 2.3.2 EXEC 2.3.3 DISCARD 2.3.4 WATCH 2.3.5 UNW…

【GitLab私有仓库】在Linux上用Gitlab搭建自己的私有库并配置cpolar内网穿透

文章目录 前言1. 下载Gitlab2. 安装Gitlab3. 启动Gitlab4. 安装cpolar5. 创建隧道配置访问地址6. 固定GitLab访问地址6.1 保留二级子域名6.2 配置二级子域名 7. 测试访问二级子域名 前言 GitLab 是一个用于仓库管理系统的开源项目,使用Git作为代码管理工具&#xf…

视频汇聚/视频云存储/视频监控管理平台EasyCVR部署后无法正常启用是什么问题?该如何解决?

安防监控/视频监控/视频汇聚平台EasyCVR能在复杂的网络环境中,将分散的各类视频资源进行统一汇聚、整合、集中管理,在视频监控播放上,视频云存储/安防监控汇聚平台EasyCVR支持多种播放协议,包括:HLS、HTTP-FLV、WebSoc…

MavenCentral库发布记录

最近发布了 Android 路由库 URouter,支持 AGP8、ActivityResult启动等特性。 把提交到 Maven Central 过程记录一下。 一、注册 Sonatype 账号,新建项目 注册 https://​​issues.sonatype.org 登录后,新建项目: 相关选项&…

Stable Diffusion 多视图实践

此教程是基于秋叶的webui启动器 1.Stable Diffsuion 使用多视图需要准备一个多角度open pose 图 我给大家提供一个可使用的。 2.需要添加图片到到controlnet当中,不要选择预处理器,选择模型为openpose的模型,然后需要点选同步图片尺寸。 3.然后填写关键字可以参照一下这个…

通过安装cpolar内网穿透在Kali上实现SSH远程连接的步骤指南

文章目录 1. 启动kali ssh 服务2. kali 安装cpolar 内网穿透3. 配置kali ssh公网地址4. 远程连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 简单几步通过cpolar 内网穿透软件实现ssh 远程连接kali! 1. 启动kali ssh 服务 默认新安装的kali系统会关闭ssh 连接服务,我们通…

智慧导览|智能导游系统|AR景区导览系统|景区电子导览

随着文旅市场的加快复苏,以及元宇宙、VR、AR、虚拟数字人等新兴技术的快速发展,文旅行业也正在加快数字化转型的步伐,向智慧景区建设迈进。为满足不同年龄段游客的游览需要,提升旅游服务体验,越来越多的旅游景区、博物…

UDP和TCP协议报文格式详解

在初识网络原理(初识网络原理_蜡笔小心眼子!的博客-CSDN博客)这篇博客中,我们简单的了解了一下TCP/IP五层网络模型,这篇博客将详细的学习一下五层网络模型中传输层的两个著名协议:UDP和TCP 目录 一, 传输层的作用 二, UDP 1,UDP协议的特点 2,UDP报文格式 三, TC…

什么是websockret连接

什么是WebSocket WebSocket,是一种网络传输协议,位于 OSI 模型的应用层。可在单个 TCP 连接上进行全双工通信,能更好的节省服务器资源和带宽并达到实时通迅 客户端和服务器只需要完成一次握手,两者之间就可以创建持久性的连接&am…

OpenCV(二十):图像卷积

1.图像卷积原理 图像卷积是一种在图像上应用卷积核的操作。卷积核是一个小的窗口矩阵,它通过在图像上滑动并与图像的像素进行逐元素相乘,然后求和来计算新图像中每个像素的值。通过滑动卷积核并在图像上进行逐像素运算,可以实现一系列图像处理…

(笔记七)利用opencv进行形态学操作

(1)程序清单 形态学操作是一种图像处理技术,它基于数学形态学理论,用于改变图像的形状和结构。它主要通过结构元素的腐蚀和膨胀操作来实现。 #!/usr/bin/env python # -*- coding:utf-8 -*- """ author: LIFEI t…

Vue生成多文件pdf准考证

这是渲染的数据 这是生成的pdf文件,直接可以打印 需要安装和npm依赖和引入封装的pdf.js文件 npm install --save html2canvas // 页面转图片 npm install jspdf --save // 图片转pdfpdf.js文件 import html2canvas from "html2canvas"; import jsPDF …

SpringMVC框架@RequestMapping用法,处理器方法参数接收,处理器方法返回值详解

1. RequestMapping 定义请求规则 1.1 指定模块名称 通过RequestMapping 注解可以定义处理器对于请求的映射规则。该注解可以注解在方 法上,也可以注解在类上,但意义是不同的。value 属性值常以“/”开始。RequestMapping 的 value 属性用于定义所匹配请…

C语言 语法积累

参考博文: c语言中int默认是有符号还是无符号,C语言迷题:有符号数与无符号数的问题_旋斡勃人的博客-CSDN博客前些天偶然看到了一个收集C语言迷题的网站,很是感兴趣。本人对C/C语言本身很是感兴趣,曾经做过几年相应的开发&#xf…

【Redis专题】Redis核心数据结构实战与高性能原理解析

目录 前言课程内容一、redis数据类型1.1 字符串(string)类型:比较简单的一种使用存储模型常用命令:(截取自【菜鸟教程】)部分演示应用场景 1.2 哈希(hash)类型:同类数据归…

使用rem + sass + 媒体查询 进行横竖屏适配移动端项目

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 一、 媒体查询(Media Query)1.简单了解2.简单例子3. 语法(1)媒体类型(mediatype )&#xff0…

快讯 | ALVA 荣获首届“格物杯”联通物联网应用创新大赛复赛一等奖!

8 月 7 日,“物聚龙江 智联百业”物联网创新发展合作交流暨首届“格物杯”联通物联网应用创新大赛企业赛道复赛 (赛区四)在哈尔滨举办。 ALVA Systems 凭借智能远程协助平台—— ALVA Rainbow 在近 50 家企业中脱颖而出,荣获首届“格物杯”联通物联网应…

静态路由配置实验:构建多路由器网络拓扑实现不同业务网段互通

文章目录 一、实验背景与目的二、实验拓扑三、实验需求四、实验解法1. 配置 IP 地址2. 按照需求配置静态路由,实现连接 PC 的业务网段互通 摘要: 本实验旨在通过配置网络设备的IP地址和静态路由,实现不同业务网段之间的互通。通过构建一组具有…

华为云 异构数据迁移

数据库和应用迁移 UGO(Database and Application Migration UGO,以下简称为UGO)是专注于异构数据库结构迁移的专业服务。可将源数据库中的DDL、DML和DCL一键自动转换为华为云GaussDB/RDS的SQL语法,通过数据库评估、对象迁移两大核…