首页 > 其他分享 >vue项目时间毫秒转换成标准时间显示(过滤器的使用方法)

vue项目时间毫秒转换成标准时间显示(过滤器的使用方法)

时间:2022-10-15 19:11:49浏览次数:64  
标签:vue const mm padStart 毫秒 过滤器 dt

vue项目中有个时间轴,需要转换成标准的年月日的格式打印

思路:先vue的文件引入文件main.js里面进行过滤器全局注册,过滤器的处理的处理函数中做转换处理,,在vue表单里应用过滤器。

main.js

<代码>
Vue.filter('dateFormat',function (originVal){
   const dt = new Date(originVal)
   const y = dt.getFullYear()
   const m = (dt.getMonth()+1 + '').padStart(2,'0')
   const d = (dt.getDay() + '').padStart(2,'0')

   const hh = (dt.getHours() + '').padStart(2,'0')
   const mm = (dt.getMinutes() + '').padStart(2,'0')
   const ss = (dt.getSeconds() + '').padStart(2,'0')
   // return `yyyy-mm-dd hh:mm:ss` //一样的写法在下面
   return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

在vue实例组件中应用:先slot-scope="scope"插槽的方式接受表单数据,在用该数据进行使用过滤器。

<代码>
 <el-table :data="goodslist" border stripe>
       <el-table-column type="index" > </el-table-column>
       <el-table-column label="商品名称" prop="goods_name"> </el-table-column>
       <el-table-column label="商品价格(元)" prop="goods_price" width="95px"> </el-table-column>
       <el-table-column label="商品重量" prop="goods_weight" width="70px"> </el-table-column>
       <el-table-column label="创建时间" prop="add_time" width="140px">
        <template slot-scope="scope">
          {{scope.row.add_time | dateFormat}}
        </template>
       </el-table-column>
       <el-table-column label="操作" width="130px">
        <template slot-scope="scope">
           <el-button type="primary" size="mini" icon="el-icon-edit"> </el-button>
           <el-button type="danger"  size="mini" icon="el-icon-delete"> </el-button>
        </template>
       </el-table-column>
      </el-table>

效果:

标签:vue,const,mm,padStart,毫秒,过滤器,dt
From: https://www.cnblogs.com/mahmud/p/16794813.html

相关文章

  • vue-hooks__钩子函数__进阶
    vue-hooks__钩子函数__进阶联合其他模块进行使用useHandleData用于处理数据import{ElMessageBox,ElMessage}from"element-plus";//引入element-plus的弹窗组......
  • vue,html注释包含注释会出错,嵌套注释,vscode
    vscode安装"HTML-Comment"插件即可注释的时候,如果内容还包含注释,就用ctrl+shift+/<tr><!--<th>dfasdf</th>--><thcolspan="2"class="post_time">dsdafa......
  • asp.net core +vue 导出excel
      定义Excel专用特性名(应用导出表格列名) 引入Nuget包1.Microsoft.AspNetCore.Hosting2.DotNetCore.NPOI   引入包usingNPOI.SS.UserModel;usingN......
  • vue-hooks__钩子函数
    vue-hooks__钩子函数1.什么是钩子函数钩子函数是一种在某个时刻被调用的函数,它可以让我们在某个时刻做一些事情,比如在组件挂载之前做一些事情,或者在组件更新之前做一些......
  • vue3无限滚动插件
    vue3无限滚动插件vue3-infinite-scroll-better支持Vue3的滚动加载插件,所有用法和vue-infinite-scroll一致。并解决了一些bug。安装npminstallvue3-infinite-scroll-b......
  • Vue--使用lodash--方法/实例
    简介    本文介绍Vue整合lodash的方法。安装依赖npmilodash-P使用法1:挂到原型链1.放到Vue原型链在main.js添加如下代码import_from'lodash'Vue.prototype._=......
  • Vue--整合mavon-editor编辑器(markdown编辑和预览)
    简介说明    本文介绍Vue如何使用markdown编辑器。        mavon-editor是目前比较主流的markdown编辑器,本文介绍它的使用方法。官网网址​​https://githu......
  • 【Vue】修改默认端口号
    Vue2.Xconfig文件夹中有一个index.js其中部分内容如下,port即为端口号,在这里更改即可。   Vue3.XVue3.x中修改端口号则需要在项目根目录下创建一个vue.config.......
  • 基于SSM+Vue的游戏攻略管理系统Java游戏商城系统(源码调试+讲解+文档)
    ......
  • Filter 过滤器
    过滤器CharacterEncodingFilter1importjavax.servlet.*;2importjava.io.IOException;34publicclassCharacterEncodingFilterimplementsFilter{5......