vuejs怎么创建并调用全局方法
时间:2021-10-18 来源:互联网
今天PHP爱好者为您带来创建并调用全局的方法:1、在vue项目src目录的任意文件下自定义一个方法;2、在“main.js”文件中使用import语句引入自定义方法,并将该方法挂载到vue实例上;3、在需要的页面,利用“$vue实例.方法名()”语句调用方法即可。希望对大家有所帮助。
本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。
Vue.js创建并调用全局方法
在vue工程中,首先在src的任意文件下自定义一个方法,举例如下
transNum (num) {
if (typeof (num) === 'undefined') {
return 0
} else {
let oldNum = num.toString().trim()
let len = oldNum.length
if (len <= 3) {
return num
} else {
let newNum = oldNum.substr(0, len - 3) + '.' + oldNum.charAt(len - 3) + 'k'
return newNum
}
}
}
方式1:挂载到Vue实例上
举例:在vue工程的main.js文件中引入该方法,并将该方法挂载到vue实例上。在main.js文件中加入如下代码
import myutil from '@/common/utils/util.js'
Vue.prototype.$myutil = myutil
在使用时可以直接通过
$myutil.transNum(num)
方式2:通过import导入
在需要调用该方法的文件的
import util from '@/common/utils/util.js''
方法的调用
util.transNum(num)
说明:
在如果要将方法的调用写在{
{}}
中,则只能通过第一种方式引入方法,具体原因和vue的生命周期有关,不多赘述。
以上就是vuejs怎么创建并调用全局方法的详细内容,更多请关注php爱好者其它相关文章!
-
-
打游戏输了,我竟然开始安慰对手 2025-06-06
-
币安怎么购买Kujira(KUJI)币?KUJI币购买教程与币安binance下载入口 2025-06-06
-
币安怎么购买Kava(KAVA)币?KAVA币购买教程与币安binance下载入口 2025-06-06
-
朋友请我吃饭,AA之后我请他绝交 2025-06-06
-