VUE页面中使用过滤器对时间戳转换日期格式

vue 过滤器 管道符 {{ | }}

过滤器 又称管道符 : | ←就是这个竖线! 叫管道符

将一串数据A拿去处理,处理完之后继续拿来用,且不会影响原来的数据A,也不会改变

是一个方法?通过参数的方式接受处理的数据,通过返回值的方式 告诉Vue显示什么

<template>}{{item.addtime | afterTime }}</template>
 
<script> 写在export default里面的data同级后面
 
filters:{
 
afterTime(value){
 
console.log(value);
 
let timeArr=value.split('T');
 
return timeArr[0];
 
}
 
},
 

如果想在filter方法中传递参数时，如下：

<template>}{{item.addtime | afterTime('params') }}</template>
 
<script> 写在export default里面的data同级后面
 
filters:{
 
    afterTime(value,params){
 
        console.log(value);
 
        let timeArr=value.split('T');
 
        return timeArr[0];
 
    }
 
},
 
</script>

具体使用方法：

<div>
          {{ from.createtime | formatDate }}
</div>


export default {

data() {
    return {
     from: {
        createtime : '', //时间
      },
    }
}
/**
   * 时间格式转换(10位时间戳转yyyy-MM-dd)
   */
  filters: {
    formatDate: function (value) {//10位时间戳转换
      let date = new Date(parseInt(value) * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let minute = date.getMinutes();
      let second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return y + '-' + m + '-' + d;
    }
  },
}

相关内容