Vue自定义指令-实时时间转换指令 v-time开发

最新推荐文章于 2022-12-23 19:17:57 发布
最新推荐文章于 2022-12-23 19:17:57 发布
阅读量911 收藏 1
点赞数 1
分类专栏： 前端 文章标签： 前端 html vue.js javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zglibk/article/details/110476537
版权
本文介绍了如何在Vue中开发一个自定义指令v-time，用于将时间戳转换为“刚刚”、“xx分钟前”等形式，提供实时显示的友好体验。通过新建html和js文件，实现时间转换逻辑，并封装Time对象。最后，注册全局指令并设置定时器，确保时间的实时更新。总结中强调在编写自定义指令时应遵循Vue的原则。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录


前言

       为了显示出 实时性 ，在一些社交类产品中，比如WX朋友圈或微博等地方，作者发布动态的时间会实时显示为“ 刚刚”、“ 1小时前”、“ 1天前” 等不同的格式。也就是一个相对本机时间转换后的相对时间。这样比直接转换为年、月、日、时、分、秒更友好。本文记录了实现这样一个 自定义指令 v-time 的详细过程。


1. 新建html、index.js文件

  1. HTML

    <!DOCTYPE html>
<html lang
了解本专栏 订阅专栏 解锁全文 超级会员免费看
【Vue】全局自定义指令v-time，将时间戳转换成“刚刚“，“x分钟前“，“x小时前“，“x天前“
qq_17734803的博客
06-01 1102
【Vue】全局自定义指令v-time，将时间戳转换成"刚刚"，"x分钟前"，"x小时前"，"x天前"
自定义指令v-time
好好学习,天天向上
02-04 490
自定义指令，你会了嘛
开发一个 实时时间转换指令 v-time
yang295242361的博客
02-26 451
<div id="app" v-cloak> <div v-time="timeNow"></div> <div v-time="timeBefore"></div> </div> var Time = { //获取当前时间戳 getUnix:function(){ ...
自定义指令v-time，实现时间转换器
uniquemei的博客
04-15 449
话不多说，直接上代码。 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>时间转换器</title> <script src="libs/vue.min.js"></script> <...
Vue 自定义指令（时间戳转换）
人与人之间最小的差别是智商，最大的差别是坚持。
06-19 469
// 全局时间戳转换指令注册 Vue.directive('time',{ bind: function (el,binding) { let getTime = new Date(binding.value) el.innerHTML = `${getTime.getFullYear()}-${getTime.getMonth()+1}-${getTime.getDate()}`; } }) ...
Vue自定义指令v-time：实时时间转换实现
"本文主要介绍如何使用Vue.js开发一个实时时间转换的自定义指令v-time，将时间戳转化为用户友好的相对时间显示。" 在Vue.js中，自定义指令允许我们扩展Vue的基础功能，实现特定的逻辑或操作。在这个案例中，我们将...
Vue实战：打造实时时间转换自定义指令v-time
"这篇文章主要介绍了如何使用Vue.js开发一个实时性的时间转换指令，通过自定义Vue指令`v-time`，将Unix时间戳实时转换为易于理解的相对时间，如‘刚刚’、‘xx分钟前’、‘xx小时前’等。作者通过分析时间转换的逻辑...
Vue实战--自定义时间转化指令
weixin_42874245的博客
07-14 330
  不知不觉，又过了一周的时间了，下面是我Vue实战第二篇，开发一个实时时间转换指令 v-time，能将时间戳转化为更形象的几秒钟前、几分钟前、几小时前等不同的格式，在一些社交类的产品都会有这种需求。以下是我改进的一个todoList，结合了实时时间转化指令。》 文章首发于 掘金 先上效果图 只实现逻辑，没有添加CSS样式 目录结构 代码 不多解释，直接上代码 index.html ...
Vue自定义指令，时间转换
qq_34579060的博客
07-25 254
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>时间转换指令</title> </head> <body> <div id="app"> <div...
《Vue.js实战》- 开发一个实时时间转换指令 v-time
u014773932的博客
06-08 773
一 般在服务端的存储时间格式是 Unix 时间 戳,比如 2017-01-01 00:00 : 00 的时间 戳是1483200000 。前端在拿到数据后 , 将它转换为可读的时间格式再显示出来 。 为了显 示 出实时性,在一些社交类产品中,甚至会实时转换为几秒钟前、几分钟前、几小时前等不同的格式,这样比直接转换为年、月、日、时、分、秒更友好。本示例就来实现这样一个自定义指令 v-time , 将表达式传入的时间戳实时转换为相对时间。 练习 1 : 开发一个自定义指令 v-birthday ,接收一个出生
date-time-format:日期时间格式
07-06
已弃用的日期时间格式替换为 - npm 安装： $ npm install date-time-string 或者 < script src =" http://lightspeedworks.github.io/date-time-string/lib/date-time.js " > </ script > 用法： 简单的功能 var DateTime = require ( 'date-time-string' ) ; console . log ( DateTime . toDateTimeString ( ) ) ; // 2014-12-15 21:58:56.450 console . log ( DateTime . toDateString ( ) ) ; // 2014-12-15 console . log ( DateTime . toTim
v-linkify:一个简单的Vue指令，可将URL和电子邮件转换为可点击的链接
05-03
v链接 VueJS的源代码。 一个简单的Vue指令，可将URL和电子邮件转换为可点击的链接。 没有依赖！ 安装 npm install v - linkify 全局安装 main.js import Vue from 'vue' ; import vLinkify from 'v-linkify' ; Vue . use ( vLinkify ) 本地安装 component.vue import { vLinkify as linkify } from "v-linkify" ; export default { directives : { linkify } } 基本用法 < template> < div> v-linkify https://github.com/maorbarel/v-linkify
vue自定义指令
songmumu博客
04-05 490
介绍：文章、博文发布网站对文章发布时间的tipindex.html-&gt;body&lt;div id="app"&gt; &lt;div v-time="nowTime"&gt; &lt;/div&gt; &lt;div v-time="beforeTime"&gt;&lt;/div&gt; &lt;/div&gt;index
Vue自定义指令和Vue生命周期
qq_52619560的博客
07-25 1273
Vue.directive(指令名,配置对象)或Vue.directive(指令名,回调函数)1.mounted发送ajax请求,启动定时器,绑定自定义事件,订阅消息等[初始化操作](2).指令名如果是多个单词,要使用"-"连接的命名方式,不要用小驼峰命名。2.生命周期是什么Vue在关键时刻帮我们调用的一些特殊名称功能的函数.(2).inserted指令所在元素被插入页面是调用。1.又名生命周期回调函数,生命周期函数,生命周期钩子。(1).指令定义时不加v-,但使用时要加v-...
【Vue——自定义指令】Vue3的日期时间格式化
毛毛的博客
11-07 2894
Vue3使用自定义指令实现的日期时间格式化。
【vue】使用自定义指令实现时间戳格式化
CamphorBlossom的博客
12-23 1221
通过自定义指令directive实现可以自动对时间戳格式化的功能，并抽取封装成工具类。
Vue自定义指令实例（实时时间转换指令）
每天学习一点点
01-02 820
在很多论坛网站里面可以看到这样的信息：     文章发表距离当前时间的时间间隔。    我们来自定义一个指令v-time，将表达式传入的时间戳转换成相对时间。 index.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt
Vue自定义指令-格式化日期
pandawangyt的博客
04-13 838
全局指令 钩子函数 bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。 componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。 unbind：只调用一
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

←か淡定☆ ヾ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值