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

最新推荐文章于 2024-04-24 14:47:46 发布
最新推荐文章于 2024-04-24 14:47:46 发布
阅读量846 收藏 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自定义指令v-time，将表达式传入的时间戳实时转换为相对时间。下面小编给大家带来了使用Vue开发一个实时性时间转换指令，需要的朋友参考下吧
自定义指令v-time
summer爱前端
02-04 434
自定义指令，你会了嘛
vue各种时间类型转换
最新发布
weixin_45884508的博客
04-24 1037
【代码】vue各种时间类型转换。
开发一个 实时时间转换指令 v-time
yang295242361的博客
02-26 405
<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 412
话不多说，直接上代码。 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>时间转换器</title> <script src="libs/vue.min.js"></script> <...
Vue 自定义指令（时间戳转换）
人与人之间最小的差别是智商，最大的差别是坚持。
06-19 421
// 全局时间戳转换指令注册 Vue.directive('time',{ bind: function (el,binding) { let getTime = new Date(binding.value) el.innerHTML = `${getTime.getFullYear()}-${getTime.getMonth()+1}-${getTime.getDate()}`; } }) ...
浅谈在Vue.js中如何实现时间转换指令
12-09
在社区中，发布的动态信息，经常会有一个相对余实际发布时间...我们可以自定义一个 v-relative-time 指令来实现上述功能。 html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
date-time-sample
03-07
标题中的“date-time-sample”表明这是一个关于日期时间处理的示例项目，可能包含了与JavaScript、前端开发或Vue.js框架相关的日期时间操作。描述中的信息提供了项目构建和运行的步骤，暗示了这是一个基于Vue.js的...
vue.js学习相关文件-测试代码
06-05
实时变更：test2/real-time-change.html 模糊搜索：test2/search.html 购物车：test2/shoppingCart.html 双向绑定：test2/two-way-binding.html 字符转换：test2/upperCase.html class属性绑定：test2/v-bind.html ...
Vue.js仿Metronic高级表格（二）数据渲染
10-20
从创建数据结构、使用`v-for`指令遍历数据到定义和使用自定义过滤器，这些技术都是Vue.js的核心特性，可以帮助开发者构建出交互丰富的数据展示表格。对于进一步的学习，可以探索Vue的组件化、计算属性、事件处理以及...
Vue实战--自定义时间转化指令
weixin_42874245的博客
07-14 265
  不知不觉，又过了一周的时间了，下面是我Vue实战第二篇，开发一个实时时间转换指令 v-time，能将时间戳转化为更形象的几秒钟前、几分钟前、几小时前等不同的格式，在一些社交类的产品都会有这种需求。以下是我改进的一个todoList，结合了实时时间转化指令。》 文章首发于 掘金 先上效果图 只实现逻辑，没有添加CSS样式 目录结构 代码 不多解释，直接上代码 index.html ...
Vue自定义指令，时间转换
qq_34579060的博客
07-25 219
<!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 701
一 般在服务端的存储时间格式是 Unix 时间 戳,比如 2017-01-01 00:00 : 00 的时间 戳是1483200000 。前端在拿到数据后 , 将它转换为可读的时间格式再显示出来 。 为了显 示 出实时性,在一些社交类产品中,甚至会实时转换为几秒钟前、几分钟前、几小时前等不同的格式,这样比直接转换为年、月、日、时、分、秒更友好。本示例就来实现这样一个自定义指令 v-time , 将表达式传入的时间戳实时转换为相对时间。 练习 1 : 开发一个自定义指令 v-birthday ,接收一个出生
vue自定义指令
songmumu博客
04-05 453
介绍：文章、博文发布网站对文章发布时间的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时间转换集锦
Ms_alinda的博客
06-01 181
changeTime(time) { var date = new Date(time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000 var Y = date.getFullYear() + '-'; var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; var D = date..
【Vue】全局自定义指令v-time，将时间戳转换成“刚刚“，“x分钟前“，“x小时前“，“x天前“
qq_17734803的博客
06-01 1004
【Vue】全局自定义指令v-time，将时间戳转换成"刚刚"，"x分钟前"，"x小时前"，"x天前"
Vue自定义指令实例（实时时间转换指令）
每天学习一点点
01-02 777
在很多论坛网站里面可以看到这样的信息：     文章发表距离当前时间的时间间隔。    我们来自定义一个指令v-time，将表达式传入的时间戳转换成相对时间。 index.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt
vue 监听复制粘贴_超实用的8个自定义Vue指令
weixin_39817215的博客
01-26 1686
Vue 自定义指令在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过Vue.directive( id, [definition] )方式注册全局指令。然后在入口文件中进行...
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、付费专栏及课程。

余额充值