首页 php下载 php教程 电脑软件 手机软件 手机游戏 单机游戏 资讯文章 专题下载 标签合集

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爱好者其它相关文章!

热门下载

更多