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

过滤器

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

下面通过代码给大家介绍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 过滤当前时间 实现实时更新，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • Vue2.0 v-for filter列表过滤功能的实现

    使用计算属性app.js var app5 = new Vue({ el: '#app5', data: { shoppingList: [ "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", &quo

  • vue 过滤器filter实例详解

    vue的过滤器一般在JavaScript 表达式的尾部,由"|"符号指示: 过滤器可以让我们的代码更加优美,一般可以用在时间格式化,首字母大写等等. 例如:{{ date | dateFormat }}这是过滤器的写法:{{ dateFormat(date) }}这是函数调用的写法 可以看出过滤器的写法更加语义化,让人一眼可以看出它的含义. <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --&

  • 在Vue methods中调用filters里的过滤器实例

    需求:vue中,除了在模板中使用过滤器,有时候,methods中也需要使用filters中的过滤器, 网友hongz1125提出的解决办法: this.$options.filters[filter](...args) //这种方法很简单,也很实用 下面是我的方法,有点复杂.建议使用上面网友说的方法. filters: { formatScore(score) { if (score < 20) { score = '不合格'; } else if (score >= 20 &&

  • Vue filters过滤器的使用方法

    本文实例为大家分享了Vue filters过滤器使用,供大家参考,具体内容如下 实例 先来看看一段代码理解下 html <div id="app"> {{message | filters2| filters3(true,priceCount)}} </div> js var app = new Vue({ el: "#app", data: { message: 199, priceCount:.8 }, filters:{ filters

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

    过滤器 过滤器是处于客户端与服务器资源文件之间的一道过滤网,在访问资源文件之前,通过一系列的过滤器对请求进行修改.判断等,把不符合规则的请求在中途拦截或修改.也可以对响应进行过滤,拦截或修改响应. 下面通过代码给大家介绍Vue filter 过滤当前时间 实现实时更新,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • Vue filter格式化时间戳时间成标准日期格式的方法

    调用实例:yyyy-MM-dd或者yyyy-MM-dd hh:mm:ss进行格式 <div>{{data | dataFormat('yyyy-MM-dd hh:mm:ss')}}</div> 代码: import Vue from 'vue' Vue.filter('dataFormat', function (value, fmt) { let getDate = new Date(value); let o = { 'M+': getDate.getMonth() + 1,

  • Vue 中获取当前时间并实时刷新的实现代码

    1. 实现代码 <template> <div> {{nowDate}}{{nowWeek}}{{nowTime}} </div> </template> <script> export default { data(){ return { nowDate: "", // 当前日期 nowTime: "", // 当前时间 nowWeek: "" // 当前星期 } }, methods

  • WPF实现进度条实时更新效果

    WPF实现进度条实时更新效果

    本文实例为大家分享了WPF实现一个实时更新的进度条,供大家参考,具体内容如下 效果图 xaml代码 <Window x:Class="ProgressBar.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d=&q

  • JavaScript实时更新当前的时间的示例代码

    实现的效果如下: 时间会实时更新 具体的JS代码如下 var dateStart; function start() { dateStart = new Date(); //开始时间 startTime(); } function startTime() { set = window.setTimeout("startTime()", 1000); var dt = new Date(); var day = dt.getDay(); var weeks = new Array(&qu

  • vue 2.1.3 实时显示当前时间,每秒更新的方法

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue</title> </head> <body> <div id="app"> {{date}} </div> <!-- 开发环境版本,包含了用帮助的命令行警告 --> <script src=&

  • vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新

    今天写项目的时候遇到了歌手排序的问题,联想到了我们平时的手机通讯录侧栏字母排序,按照ABCDE这样的顺序对名字进行排序. 我们先来看看效果 那就用vue来实现一遍 首先新建一个vue页面,取名为helloworld.vue 在页面里写入内容 <template> <div class="hello"> <div class="singer" id="singer"> <div class="si

  • vue.js实现格式化时间并每秒更新显示功能示例

    vue.js实现格式化时间并每秒更新显示功能示例

    本文实例讲述了vue.js实现格式化时间并每秒更新显示功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=

  • JavaScript实现实时更新系统时间的实例代码

    一.Js代码 function getTime(){ str = "当前系统时间:" var p = document.getElementById("sy_time"); time = new Date(); year = time.getFullYear(); month = time.getMonth() + 1; day = time.getDate(); hour = time.getHours(); minutes = time.getMinutes()

  • jQuery实现下拉菜单（内容为时间）的实时更新及图表的随动更新的方法

    工程分享: 模块1:下拉菜单的实时显示最近一周时间: //显示日期下拉选框 for(var i=0;i<7;i++){ $("#choose1>option:eq("+i+")").html(GetDateStr(-i)); $("#choose1>option:eq("+i+")").attr("value",GetDateStr(-i));//该语句为了便于下拉选中的数据的值 } //

随机推荐