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

最新推荐文章于 2022-12-23 19:17:57 发布
最新推荐文章于 2022-12-23 19:17:57 发布
阅读量847 收藏 1
点赞数 1
分类专栏： 前端 文章标签： 前端 html vue.js javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zglibk/article/details/110476537
版权

目录


前言

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


1. 新建html、index.js文件

  1. HTML

    <!DOCTYPE html>
<html lang="en">
了解本专栏 订阅专栏 解锁全文 超级会员免费看
←か淡定☆ ヾ
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
使用Vue开发一个实时性时间转换指令
08-28
使用Vue开发一个实时性时间转换指令 本文将详细介绍如何使用Vue开发一个实时性时间转换指令，实现将表达式传入的...我们可以使用Vue自定义指令来实现实时性时间转换指令，并使用Time对象来封装与时间相关的函数。
浅谈在Vue.js中如何实现时间转换指令
12-09
在社区中，发布的动态信息，经常会有一个相对余实际发布时间...我们可以自定义一个 v-relative-time 指令来实现上述功能。 html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
vue实现自定义指令和指令的周期
hdj0511的博客
10-19 321
vue实现自定义指令和指令的周期
自定义指令v-time，实现时间转换器
uniquemei的博客
04-15 413
话不多说，直接上代码。 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>时间转换器</title> <script src="libs/vue.min.js"></script> <...
【vue】使用自定义指令实现时间戳格式化
CamphorBlossom的博客
12-23 1157
通过自定义指令directive实现可以自动对时间戳格式化的功能，并抽取封装成工具类。
自定义指令v-time
summer爱前端
02-04 436
自定义指令，你会了嘛
vue 自定义时间转换指令（将时间戳转换为“刚刚“，“xx分钟前“，“xx小时前“，“xx天前“）
04-30 1886
引言 在一些社区，比如微博、朋友圈等，发布的动态会有个相对本机时间转换后的相对时间， 如图中波浪线圈出的时间 一般在服务端的存储时间格式是 Unix 时间戳，比如 2017-01-01 00:00 00 的时间戳是1483200000。前端在拿到数据后，将它转换为可读的时间格式再显示出来。 为了显出实时性，在一些社交类产品中，甚至会实时转换为几秒钟前、几分钟前、几小时前等不同的格式，这样比直接转换为年、月、日、时、分、秒更友好。 本示例就来实现这样一个自定义指令 v-time 将表达式传入的时间戳实时转换
第十六课 自定义指令1
08-03
下面我们将创建一个自定义指令 `v-timeformat`，用于将时间戳转换为易读的日期时间格式： ```javascript Vue.directive('timeformat', { bind: function (el, binding, vnode) { function initTime(num) { ...
date-time-sample
03-07
标题中的“date-time-sample”表明这是一个关于日期时间处理的示例项目，可能包含了与JavaScript、前端开发或Vue.js框架相关的日期时间操作。描述中的信息提供了项目构建和运行的步骤，暗示了这是一个基于Vue.js的...
Vue自定义指令实例（实时时间转换指令）
仗剑天涯，从摘要开始
04-01 227
在很多论坛网站里面可以看到这样的信息： 文章发表距离当前时间的时间间隔。 我们来自定义一个指令v-time，将表达式传入的时间戳转换成相对时间。 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l...
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
Vue.js--自定义指令（时间转换）
吴声子夜歌的博客
10-18 651
自定义指令 v-time 将绝对时间转换为相对时间。（例如，社交软件发布动态里面的时间、几分钟前、几小时前…） 入口页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content...
【Vue】全局自定义指令v-time，将时间戳转换成“刚刚“，“x分钟前“，“x小时前“，“x天前“
qq_17734803的博客
06-01 1009
【Vue】全局自定义指令v-time，将时间戳转换成"刚刚"，"x分钟前"，"x小时前"，"x天前"
《Vue.js实战》- 开发一个实时时间转换指令 v-time
u014773932的博客
06-08 707
一 般在服务端的存储时间格式是 Unix 时间 戳,比如 2017-01-01 00:00 : 00 的时间 戳是1483200000 。前端在拿到数据后 , 将它转换为可读的时间格式再显示出来 。 为了显 示 出实时性,在一些社交类产品中,甚至会实时转换为几秒钟前、几分钟前、几小时前等不同的格式,这样比直接转换为年、月、日、时、分、秒更友好。本示例就来实现这样一个自定义指令 v-time , 将表达式传入的时间戳实时转换为相对时间。 练习 1 : 开发一个自定义指令 v-birthday ,接收一个出生
Vue 自定义指令（时间戳转换）
人与人之间最小的差别是智商，最大的差别是坚持。
06-19 422
// 全局时间戳转换指令注册 Vue.directive('time',{ bind: function (el,binding) { let getTime = new Date(binding.value) el.innerHTML = `${getTime.getFullYear()}-${getTime.getMonth()+1}-${getTime.getDate()}`; } }) ...
Vue自定义指令-格式化日期
pandawangyt的博客
04-13 763
全局指令 钩子函数 bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。 componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。 unbind：只调用一
vue 时间格式化
热门推荐
让优秀成为一种习惯
08-24 3万+
讲述一下vue时间格式化。
开发一个 实时时间转换指令 v-time
yang295242361的博客
02-26 407
<div id="app" v-cloak> <div v-time="timeNow"></div> <div v-time="timeBefore"></div> </div> var Time = { //获取当前时间戳 getUnix:function(){ ...
vue自定义指令实现v-if效果
最新发布
05-01
Vue自定义指令是Vue提供的一种拓展语法，用于扩展Vue的功能。实现v-if效果，需要新增一个自定义指令，例如v-visible。主要思路是在指令中通过binding.value获取到值，对元素进行判断并修改样式。 具体实现步骤如下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

←か淡定☆ ヾ

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

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

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

打赏作者

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

抵扣说明：

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

余额充值