为什么还要用自定义指令来实现时间戳转换呢,用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)
}
感谢大家观看,我们下次见
十天看一部剧,还可以吧
@梦不见的梦 行,谢谢提醒,我优化一下
网站的速度有待提升,每次打开都要转半天还进不来呢
@React实战爱彼迎项目(二) - 程序员鸡皮 哪里有问题了,报错了吗?
@Teacher Du 那是怕你们毕不了业,我大学那会儿给小礼品
我们大学那会,献血还给学分~
@ab 我想去学网安,比如网警,但分也贼高😕
@夜 加油,你一样也可以成为程序员的,需要学习资料可以V我
佬发布的好多技术文章似乎我只能评论这篇,真正的程序员!!哇塞 我也想去献血,过两年就成年了可以去献血了