vue2和vue3分别如何全局引入并使用js

news2024/11/16 21:56:44

如下js:util/tool.js

var tool = {
	nullKeyValueConvertLine(data){
		if(data && data.length > 0){
		       data.map((item,index)=>{
		          for(var key in item){
		           if(!item[key]&&item[key]!=0){
		             item[key] = '-'
		          }
		      }
		  })
		 }
	},
}
export default tool

在vue2项目中全局引入并使用js

1.在main.js中引入

import Vue from 'vue';
import tool from "@/util/tool.js"

Vue.prototype.$tool = tool;

2.在页面中直接使用,例如:

<script>
	export default {
		name: 'home',
		created() {
            //方法一的使用方法
			this.$tool.nullKeyValueConvertLine()
            //方法二的使用方法
            tool.nullKeyValueConvertLine()
		}
	}
</script>

在vue3项目中全局引入并使用js

1.在main.js中引入

import App from './App'
const app = createApp(App)

app.config.globalProperties.$properType = {
    //一般公共方法
    tool : tool,
}

2.在页面中使用,例如:

this.$properType.tool.nullKeyValueConvertLine() 

附送250套精选项目源码

源码截图

 源码获取:关注公众号「码农园区」,回复 【源码】,即可获取全套源码下载链接

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

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

相关文章

2024上海MWC 参展预告 | 未来先行,解锁数字化新纪元!

一、展会介绍——2024世界移动通信大会 2024年世界移动通信大会上海(MWC上海)将于6月26日至28日在上海新国际博览中心举行。 本届大会以“未来先行(Future First)”为主题聚焦“超越5G”、“数智制“人工智能经济’造”三大热点话题。届时将在包括超级品牌馆(Super Hall)在内…

C++(part2、3-Linux系统编程+数据库项目):Linux网络云盘

文章目录 一、项目需求分析1.一期&#xff1a;命令行解析(1)cd(用栈管理)、ls、pwd(2)puts、gets(3)mkdir、touch、rmdir、rm 2.二期&#xff1a;密码验证、日志、断点续传、大文件传输(1)密码验证(2)日志(3)断点续传(4)大文件传输 3.三期&#xff1a;用户注册、用户登录、虚拟…

nginx+keepalived+tomcat集群实验

如遇星河 | nginx+keepalived高可用集群实验 木子87 | Keepalived+Nginx+Tomcat 实现高可用Web集群 环境 192.168.40.204 tomcat-1 192.168.40.138 tomcat-2 安装tomcat [root@bogon local]# vim /etc/profile 添加环境变量 JAVA_HOME=/usr/local/java PATH=$J…

一份LLM资源清单围观技术大佬的日常;手把手教你在美国搭建「百万卡」AI数据中心;为啥大模型做不好简单的数学计算? | ShowMeAI日报

&#x1f440;日报&周刊合集 | &#x1f3a1;ShowMeAI官网 | &#x1f9e1; 点赞关注评论拜托啦&#xff01; 1. 为啥大模型做不好简单的数学计算&#xff1f;从大模型高考数学成绩不及格说起 司南评测体系 OpenCompass 选取 7 个大模型 (6 个开源模型 GPT-4o)&#xff0c;…

复制完若依后,idea没有maven窗口

右击项目 添加框架 添加maven框架就可以了

【Vue】vue-router路由使用

前言 Vue Router是Vue框架中非常重要的一个功能。 目标 1 单页面应用与多页面应用的区别; 2 vue-router的具体实现方法; 3 路由模式有哪几种,有什么区别; 4 如何进行路由守卫与路由缓存; 一 路由的概念 概念 Vue Router是Vue提供的路由管理器。将组件与路由一一对应起来,…

vantUI upload 上传组件v-model绑定问题

直接绑定一个数组会有问题,删除失效/上传不了等等 解决在v-model绑定的数组外包一个对象即可

无人机捕获的视频跟踪UAV123数据集(目标检测)

亲爱的读者们&#xff0c;您是否在寻找某个特定的数据集&#xff0c;用于研究或项目实践&#xff1f;欢迎您在评论区留言&#xff0c;或者通过公众号私信告诉我&#xff0c;您想要的数据集的类型主题。小编会竭尽全力为您寻找&#xff0c;并在找到后第一时间与您分享。 摘要&a…

elementplus el-table(行列互换)转置

Element Plus v2.4.0, repl v3.4.0 <template> <div><el-table :data"tableData" style"width: 100%"><el-table-column prop"name" label"名字" width"180" /><el-table-column prop"wei…

Spring Boot 快速入门4 ——JSR-303 数据校验

目录 一、前言 二、JSR303 简介 三、使用方法 常用注解 Validated、Valid区别 四、编写测试代码&#xff1a; 1. 实体类添加校验 2. 统一返回类型 3. 测试类 4.我们把异常返回给页面 5.抽离全局异常处理 2. 书写ExceptionControllerAdvice 一、前言 我们在日常开发…

SpringMVC系列二: 请求方式介绍

RequestMapping &#x1f49e;基本使用&#x1f49e;RequestMapping注解其它使用方式可以修饰类和方法可以指定请求方式可以指定params和headers支持简单表达式支持Ant 风格资源地址配合PathVariable 映射 URL 绑定的占位符注意事项和使用细节课后作业 上一讲, 我们学习的是Spr…

《昇思25天学习打卡营第1天|onereal》

昇思25天学习打卡营第1天;有点一头雾水的感觉&#xff0c;说是要在jupyter中签到打卡&#xff0c;是不是就是复制粘贴。我以为是要在终端机器中运行代码呢。 如果只是粘贴代码&#xff0c;那未免太简单了。 我还是想运行这个算力机器&#xff0c;但是他们说每次只能2小时。太…

中国4个民族群体的全基因组DNA甲基化变异图谱首次发布

2023年4月&#xff0c;由西北工业大学联合复旦大学等院校在Science China Life Sciences上发表题为“Genome-wide DNA methylation landscape of four Chinese populations and epigenetic variation linked to Tibetan high altitude adaptation”的文章&#xff0c;该研究通过…

Qt 信号与槽的使用详解 - 多种绑定形式、同步异步、Lambda表达式等

Qt 信号与槽的使用详解 - 多种绑定形式、同步异步、Lambda表达式等 引言一、信号与槽常见的绑定形式二、信号与槽的连接方式 - 同步异步 引言 在Qt框架中&#xff0c;信号与槽&#xff08;Signals and Slots&#xff09;机制是一种强大的通信方式&#xff0c;它允许对象之间进…

讲座学习截图——《CAD/CAE/CAM几何引擎-软件概述》(一)

目录 引出CAD/CAE/CAM几何引擎-软件概述 郝建兵CADCAECAM 几何模型内核ACIS 两个老大之一Open CascadeParasolid 两个老大之一Autodesk的内核 总结其他自定义信号和槽1.自定义信号2.自定义槽3.建立连接4.进行触发 自定义信号重载带参数的按钮触发信号触发信号拓展 lambda表达式…

贝锐花生壳内网穿透

贝锐花生壳内网穿透使用步骤 首先你得去官网购买一个域名配置一下内网穿透映射官网下载一个客户端修改代码配置 首先你得去官网购买一个域名 配置一下内网穿透映射 官网下载一个客户端 注意&#xff0c;一定要下载客户端&#xff0c;不然用不了 当然&#xff0c;本地我已经提前…

小程序中用font-spider压缩字体后,字体没效果(解决办法)

因为项目中需要引入外部字体&#xff0c;有两种方案&#xff0c; 第一是把字体下载到本地&#xff0c; 第二种是cdn请求服务器放字体的地址 但是小程序是有大小限制的&#xff0c;所以必须要压缩字体大小&#xff0c;这时候有些人就说了&#xff0c;那把字体放在服务器上&a…

日常-----最爱的人

今日话题 大家好嗷&#xff0c;今天聊的技术可比之前的重要的多啊&#xff0c;哼哼&#xff0c;也不是今天&#xff0c;大家像我看齐嗷&#xff0c;我宣布个事情&#xff01;&#xff01;&#xff01; 于2024年6月21日晚上&#xff0c;本人遇到了这一生最爱的人 嘿嘿 这种事…

一、Vue 世界初探

我们既然使用idea,当然需要一些配置&#xff0c;不使用idea 的可以忽略。 1、我们打开settings 下载vue.js 插件&#xff0c;然后重启。打开我们创建的项目zlflovemmVue 2、配置js 版本 ECMAScript6 3、HTML 增加 .vue 支持 4、启动项目&#xff0c;在edit Configurations 中增…

【Pandas驯化-15】Pandas中几个特征工程函get_dummies、factorize、diff、rank技巧

【Pandas驯化-15】Pandas中几个特征工程函get_dummies、factorize、diff、rank技巧 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#x1f387; 相关内…