程序员鸡皮

文章 分类 评论
60 3 9

站点介绍

一名PHP全栈程序员的日常......

Vue3自定义指令时间格式化案例(4)

abzzp 2024-08-31 177 0条评论 前端 vue

首页 / 正文
本站是作为记录一名北漂程序员编程学习以及日常的博客,欢迎添加微信BmzhbjzhB咨询交流......

发布于2024-07-04

为什么还要用自定义指令来实现时间戳转换呢,用js插件写就可以了,通过自定义指令可以快速的优点是什么?
因为每次使用不用再单独引入了,方便快速实现功能,下面是示例

// App.vue
<template>
  <div class="app">
    <h2 v-ftime="'YYYY/MM/DD'">{{ timestamp }}</h2>
    <h2 v-ftime>{{ 1551111166666 }}</h2>
  </div>
</template>  
<script setup>
  const timestamp = 1231355453
</script>
<style scoped>
</style>

这里我们用到了dayjs,所以要先安装dayjs

npm install dayjs

实现的js文件

//directives/ftime.js
import dayjs from 'dayjs'

export default function directiveFtime(app){
  app.directive("ftime",{
    mounted(el,bindings){
      // 1.获取时间,并且转化成毫秒
      let timestamp = el.textContent
      if(timestamp.length === 10){
        timestamp = timestamp * 1000
      }

      timestamp = Number(timestamp)

      // 2.获取传入的参数
      let value = bindings.value;
      if(!value){
        value = "YYYY-MM-DD HH:mm:ss"
      }

      // 3.对世界进行格式化
      const formatTime = dayjs(timestamp).format(value)
      el.textContent = formatTime
    }
  })
}

需要在index.js中引入

// directives/index.js
import directiveFtime from "./ftime"

export default function directives(app) {
  directiveFtime(app)
}

感谢大家观看,我们下次见

评论(0)

最新评论

  • abzzp

    十天看一部剧,还可以吧[[呲牙]]

  • ab

    @梦不见的梦 行,谢谢提醒,我优化一下

  • 梦不见的梦

    网站的速度有待提升,每次打开都要转半天还进不来呢

  • abzzp

    @React实战爱彼迎项目(二) - 程序员鸡皮 哪里有问题了,报错了吗?[[微笑]]

  • abzzp

    @Teacher Du 那是怕你们毕不了业,我大学那会儿给小礼品[[发呆]]

  • Teacher Du

    我们大学那会,献血还给学分~

  • @ab 我想去学网安,比如网警,但分也贼高😕

  • ab

    @夜 加油,你一样也可以成为程序员的,需要学习资料可以V我

  • 佬发布的好多技术文章似乎我只能评论这篇,真正的程序员!!哇塞 我也想去献血,过两年就成年了可以去献血了

日历

2024年11月

     12
3456789
10111213141516
17181920212223
24252627282930

文章目录

推荐关键字: vue JavaScript React Golang 观后感 ES6 读后感

站点公告
本站是作为记录一名北漂程序员编程学习以及日常的博客,欢迎添加微信BmzhbjzhB咨询交流......
点击小铃铛关闭
配色方案