Vue filter 过滤当前时间 实现实时更新效果


Posted in Javascript onDecember 20, 2019

过滤器

过滤器是处于客户端与服务器资源文件之间的一道过滤网,在访问资源文件之前,通过一系列的过滤器对请求进行修改、判断等,把不符合规则的请求在中途拦截或修改。也可以对响应进行过滤,拦截或修改响应。

下面通过代码给大家介绍Vue filter 过滤当前时间 实现实时更新,具体代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
  <div id="ssl">
    {{currentTime|filterTime}}
  </div>
</body>
<script>
  var em = new Vue({
    el: "#ssl",
    data: {
      currentTime: new Date(), // 获取当前时间
    },
    filters: {
      filterTime(val) {
        var Y = val.getFullYear()
        var M = val.getMonth()
        var D = val.getDate()
        var H = val.getHours()
        var MI = val.getMinutes()
        var S = val.getSeconds()
        return Y + "年" + M + "月" + D + "日" + H + "时" + MI + "分" + S + "秒"
      }
    },
    //声明周期函数 是最早使用data数据的函数
    created() {
      var _this = this; //声明一个变量指向Vue实例this,保证作用域一致
      setInterval(function () {
        _this.currentTime = new Date()//修改数据让他可以实时更新
      }, 1000);
    }
  })
</script>
</html>

这里使用了created生命周期函数 created是最早操作date数据的

代码逻辑:先让当前时间可以实时更新 在created里面

然后在filters里面更改时间格式

ps:Vue 时间过滤器

Vue里的 时间过滤器:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<div>
 {{ message | formatTime('YMD')}}
</div>
<div>
{{ message | formatTime('YMDHMS')}}
</div>
  <div>
  {{ message | formatTime('HMS')}}
  </div>
  <div>
  {{ message | formatTime('YM')}}
  </div>
  </div>

元素的补零计算:

<script>
//元素的补零计算
function addZero(val){
 if(val < 10){
 return "0" +val;
 }else{
 return val;
 }
};

console.log(addZero(9))

//实现vue中的过滤器功能 先定义过滤器 在使用    value是过滤器前面的值,type是过滤器中定义的字段
Vue.filter("formatTime",function(value,type){
var dataTime="";
var data = new Date(); 
       data.setTime(value); 
   var year  = data.getFullYear(); 
       var month = addZero(data.getMonth() + 1); 
       var day  = addZero(data.getDate()); 
       var hour  = addZero(data.getHours());
var minute = addZero(data.getMinutes());
var second = addZero(data.getSeconds());
if(type == "YMD"){
dataTime = year + "-"+ month + "-" + day;
}else if(type == "YMDHMS"){
dataTime = year + "-"+month + "-" + day + " " +hour+ ":"+minute+":" +second;
}else if(type == "HMS"){
dataTime = hour+":" + minute+":" + second;
}else if(type == "YM"){
dataTime = year + "-" + month;

}
return dataTime;//将格式化后的字符串输出到前端显示
});


var app = new Vue({
 el: '#app',
 data: {
  message: '1501068985877'
 }
     });
</script>

总结

以上所述是小编给大家介绍的Vue filter 过滤当前时间 实现实时更新,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 #Javascript
js正则匹配多个全部数据问题
Dec 20 #Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 #Javascript
Vuex实现数据共享的方法
Dec 20 #Javascript
React 实现车牌键盘的示例代码
Dec 20 #Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 #jQuery
JavaScript实现简单计算器功能
Dec 19 #Javascript
You might like
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
js里的prototype使用示例
2010/11/19 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
javascript中的this详解
2014/12/08 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
Python实现批量压缩图片
2018/01/25 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
python如何删除文件、目录
2020/06/23 Python
python 绘制正态曲线的示例
2020/09/24 Python
python解包用法详解
2021/02/17 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
工作会议欢迎词
2014/01/16 职场文书
留学自荐信写作方法
2014/01/27 职场文书
一年级语文教学反思
2014/02/13 职场文书
投标担保书范文
2014/04/02 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python
总结Pyinstaller打包的高级用法
2021/06/28 Python