在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 就可以显示出来。