Vue 新手:在vue中引入外部的js文件

在vue中如果把所有的代码都写到一个页面中,有时比较难找,显得比较复杂,所以一些js代码会写在外面的js文件中,然后引入到使用的页面中。
可以在src下新建一个文件夹去存这个js文件,例如:DateToString.js,一定要写export ,需要把模块抛出,让其他组件可以获取到。

export let DateToString = function (time) {
  var year = time.getFullYear()
  var month = time.getMonth() + 1
  if (month < 10) {
    month = '0' + month
  }
  var day = time.getDate().toString()
  if (day < '10') {
    day = '0' + day
  }
  var hour = time.getHours().toString()
  if (hour < '10') {
    hour = '0' + hour
  }
  var minute = time.getMinutes().toString()
  if (minute < '10') {
    minute = '0' + minute
  }
  var second = time.getSeconds().toString()
  if (second < '10') {
    second = '0' + second
  }
  return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
}

在其他组件使用该js文件时:
var dateToString= require(’…/…/config/DateToString.js’)
dateToString.DateToString(传一个日期);

<template>  
    <div>  
        <button @click="jsmethod">显示</button>  
    </div>  
</template>  
<script>  
var dateToString= require('../../config/DateToString.js')
    export default {  
        methods:{
          jsmethod:function(){  
              dateToString.DateToString(传一个日期);  
           }  
    }}  
</script>  

以上是方法,如果js文件是一个静态数组或属性时,可以在组件中定义一个属性或数组去接收js文件中的数组或属性
this.arrayList = dateToString.arrayJSONList 然后在template中使用arrayList 就可以显示出来。

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值