zoukankan      html  css  js  c++  java
  • 新建js文件中有自己编写的方法和数据,在其他.vue文件中调用

    比如在一个vue项目中,需要重复使用某个方法或是某个数据,可以将该方法/数据封装在一个js文件中,然后在需要使用该方法/数据的.vue文件中直接导入该js文件,使用js文件中的方法/数据。

    实现代码:

    使用js文件中的方法:

    1.js:

    export default{
      //时间戳转换为正常时间格式
      timeStampChange:function(time){
        let p = '';
        var date = new Date(time); // 获取时间戳
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
        p = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
        return p;
      }
    }
    

    2..vue文件

    import timeStampChanges from '@/assets/js/timeStampChange';
    
    this.recordInformation.map(function(item,index){
      item.time = timeStampChanges.timeStampChange(item.time);
    })
    

    使用js文件中的数据:

    1.js:

    export const componentType = [
      {id: 1, name: '管理节点'},
      {id: 2, name: '对等计算节点'},
      {id: 3, name: '前置服务节点'},
      {id: 4, name: '服务交付节点'},
      {id: 5, name: '监督节点'},
      {id: 6, name: '上层账本'},
    ]
    

    2.vue文件:

    import {componentType} from '@/assets/js/commonDatas';
    
    components: componentType,

    实现效果:

     

     即实现了将时间戳转换为正常时间格式的效果,其他页面需要转换可以直接调用。

    注意:

    1.使用js文件中的方法:通过import timeStampChanges from '@/assets/js/timeStampChange'; 来导入该js文件,timeStampChanges为该文件的别名,通过别名.(方法)来调用。

    2.使用js文件中的数据:通过import {timeStampChange} from '@/assets/js/timeStampChange'; 来导入该js文件,其中{}中的名字即为该js文件中的数据。

  • 相关阅读:
    ubuntu播放器
    第一次装ubuntu 没root密码时
    web服务器记录
    socket udp编程步骤
    nfs服务器配置
    带线程函数编译条件
    linux使用一个刚编译驱动方法
    tiny6410_led驱动Makefile
    java-设计模式-外观模式
    java-实现一个简单的java Web容器
  • 原文地址:https://www.cnblogs.com/5201314m/p/11962043.html
Copyright © 2011-2022 走看看