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

目录

  • 前言
  • 1. 新建html、index.js文件
  • 2. 时间转换逻辑
  • 3. 新建 time.js 文件
  • 4 总结



前言

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



1. 新建html、index.js文件

  1. HTML

    <!DOCTYPE html>
    <html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/516230.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Iceberg 在基于 Flink 的流式数据入库场景中的应用

本文以流式数据入库的场景为基础&#xff0c;介绍引入 Iceberg 作为落地格式和嵌入 Flink sink 的收益&#xff0c;并分析了当前可实现的框架及要点。 应用场景 流式数据入库&#xff0c;是大数据和数据湖的典型应用场景。上游的流式数据&#xff0c;如日志&#xff0c;或增量…

uniapp H5页面打包发布

文章目录1. 打开 HBuilder2. 打开项目3. 点击发行4. 等待项目编译5. 查看路径6. 安装7. 启动1. 打开 HBuilder 2. 打开项目 打开当前要打包的项目 3. 点击发行 &#xff0c;找到【网站 - PC web 或手机 H5 】 确认【网站标题】&#xff0c;无需【网站域名】&#xff0c;直…

Python 让我再次在女同学面前长脸了!(真实案例)

事情是经过这样的&#xff1a;晚上在家王者的时候&#xff0c;微信突然弹出了一条好友添加提醒&#xff0c;一看昵称&#xff0c;居然是我们大学的班花&#xff01;&#xff01;&#xff01;这真是奇怪了&#xff0c;我之前连班花的微信都没加上&#xff0c;这次却突然主动加我…

Vue 自定义指令的注册方式和选项参数

目录 1. 注册方法1.1 全局注册的写法1.2 局部注册的写法2. 自定义指令的选项2.1 选项2.2 钩子函数的参数1. 注册方法 ​ 自定义指令 的注册方法,分为 全局注册 和 局部注册 。 1.1 全局注册的写法 // 全局注册 Vue.directive("xxx", {

【CDN】最近,你的APP崩了吗?

过去几个月里&#xff0c;#xxx崩了#这个话题频繁出现在热搜榜上&#xff0c;让不少程序员小哥哥瑟瑟发抖。 从疫情宅家时期著名的视频APP“三连崩”&#xff0c;到全面复工开课后的在线教育平台与办公软件频繁宕机&#xff0c;再到报复性消费引发的点餐系统接连“爆炸”&#x…

nginx绑定多个端口

有两种方法&#xff1a; 一、在server段写上2个Listen就可以了. listen 192.168.0.15:808; listen 192.168.0.15:8098;如上,就可以同时监听2个端口了. 二、在 nginx.conf 中配置多个个server即可 worker_processes 1;events {worker_connections 1024; }http {include …

阿里云心选-T+财务软件助力线下实体的创富转型之道

一场疫情让数字化重回大众视野。数字化意味着企业经营效率提升和风险抵御能力的加强&#xff0c;是后疫情时代企业不得不考虑的问题。传统加工企业多以手工统计报表、手工出入库单据作为核算依据&#xff0c;这种传统核算方式存在极大的风险漏洞&#xff0c;比如出入库统计员核…

1024程序员节重要议程曝光,开源技术英雄会聊开源“真心话”

10 月 23-25 日&#xff0c;由 CSDN 等多家单位精心筹划的“长沙 中国 1024 程序员节”将盛大举行。程序员节活动以开源为主议题&#xff0c;包括&#xff1a;2场岳麓尖峰对话&#xff1b;2020 开源技术英雄大会&#xff1b;10 场热门技术分论坛/峰会&#xff1b;创意集市&…

Vue - 去除控制台“你正在开发模式下运行Vue”的警告

目录 1. 警告内容2. 解决方案1. 警告内容 调试 Vue 代码时,Console 控制台老是有警告,警告内容 文字信息如下: You are running Vue in development mode. 您正在开发模式下运行Vue。 Make sure to turn on production mode when deploying for production. 在为生产部署时…

Vue v-if,v-else-if,v-else的使用

v-else-if 要紧跟 v-if v-else要紧跟v-else-if 或 v-if 代码: <!doctype html> <html lang"en"> <head><meta charset"UTF-8"><title>vue.js v-if语法使用 </title><script src"vue.js"></scri…

直播预告 | 企业CICD规模化落地

【直播主题】企业CICD规模化落地 【直播时间】2020年4月28日 16:00~17:00 【直播简介】 持续交付有很多的实践&#xff0c;比如自动化测试&#xff0c;交付流水线等。对于一个小团队来说&#xff0c;使用开源工具集合和一些简单的SaaS服务&#xff08;比如Github&#xff09;…

绿网天下:上云解决系统安全和安全合规

公司简介 绿网天下&#xff08;福建&#xff09;网络科技股份有限公司&#xff08;以下简称绿网天下&#xff09;成立于2006年&#xff0c;总部设于中国厦门软件园生产基地。绿网天下是基于网络安全为基础的 K12 在线教育服务提供商&#xff0c;累计活跃用户数超千万。公司专注…

一键快速生成 Vue 的 HTML页面结构代码

目录 1. 创建配置文件2. 使用3. 配置说明4. 注意VS Code除了使用 !+Tab 在html文件中快速创建html结构代码之外,还可以自己定义代码段,这里分享如下在 Vue 环境下快速通过成 html 结构。 1. 创建配置文件 第一步 文件 ==> 首选项 ==>用户代码片段 第二步 搜索框中输…

蓝色巨人IBM全力奔赴的混合云之旅能顺利吗?

整理 | 郑丽媛头图 | CSDN下载自东方IC10 月 8 日&#xff0c;IBM 官方宣布&#xff0c;为了加速启动混合云发展战略&#xff0c;关注混合云的增长&#xff0c;目前正在计划把IT基础设施服务部门作为一家独立的上市公司分出来&#xff0c;形成两家上市公司。新公司暂定名为 New…

冠赢网络:游戏盾彻底解决DDoS/CC攻击

公司简介 厦门冠赢网络科技有限公司是一家高速发展的新型网络科技公司。2019年3月&#xff0c;冠赢网络荣任厦门市动漫游戏产业协会副会长单位&#xff1b;2019年5月&#xff0c;冠赢网络荣获“VR百强企业”称号。公司集手游、网游、VR游戏、直播平台的开发、推广、销售及运营…

腾讯位置服务地图选点这个怎么在小程序里面更新呀?

修改version https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html

完美日记:保障电商大促活动平稳运行

公司简介 PerfectDiary完美日记是广州逸仙电子商务有限公司旗下美妆品牌&#xff0c;创立于2016年。2016年&#xff0c;来自哈佛大学的品牌创始人和英国时尚设计师在伦敦相遇&#xff0c;希望有机会把欧美彩妆风尚带回亚洲&#xff0c;在视觉形象上有所突破。完美日记从T台获取…

vue-router 动态路由匹配

目录 1. 动态匹配路由的基本用法2. 路由组件传递参数2.1 props 的值为布尔类型2.2 props 的值为对象类型2.3 props的值为函数类型1. 动态匹配路由的基本用法 【应用场景】:通过动态路由 参数 的模式进行路由匹配。 var router = new VueRouter({routes: [// 动态路径参数 以…

立根融资租赁:内部系统平台上云

公司介绍 立根融资租赁&#xff08;上海&#xff09;有限公司成立于2015年8月&#xff0c;注册资本11.75亿元&#xff0c;是广州金融控股集团成员企业&#xff0c;实际控制人为广州市国资委。公司深耕公用建设、旅游、医疗、教育、新能源和消费金融等多个专业领域的融资租赁业…

在uni-app中使用vant-weapp

https://ext.dcloud.net.cn/plugin?id100