{{rateTime}}大括号里面的数字转换为字符串(日期)

481 阅读1分钟

filter的语法就是在后面加一个竖线
{{rateTime | formatDate}}

就是在vue

里面定义一个filter,

然后在methods里面定义一个components级别的filter

filters: {
  formatDate(time) {     //接收时间戳参数,拿到时间戳之后要先转换为一个date对象
// 这个函数的实现要用一个模块去实现,新创建一个date.js文件
    let date = new Date(time)
//然后写一个函数用来转换时间戳
    return formatDate(date, 'yyyy-MM-dd hh:mm')
  }
},
components: {cartcontrol, split, ratingselect},

新创建一个date.js文件利用了js模块化编程的方法

把一些通用的方法抽象成一个模块

然后想用就可以引入这个文件

import {formatDate} from 'common/js/date'
上面的formatDate加了括号,那么加括号和不加括号的区别就是:
  不加花括号的是里面定义模块的方式是export default
  带花括号的是export function,所以要用花括号

date.js可以export多个function,下面是date.js文件

export function formatDate(date, fmt) {
  // 年份截取
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) // 匹配到括号里面的/(y+)/值
  }
  let o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  }
  // 通过遍历的方法动态构造正则表达式
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + '' // 加上单引号表示转换为字符串
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
    }
  }
  return fmt
}

// 左边是否补零,比如str是6,那就是006,截取下来就是06,比如是12那 str.length就为2,截取下来就是12
function padLeftZero(str) {
  return ('00' + str).substr(str.length)
}

这个函数的大体原理就是把我们传入的fmt里面的yyyy MM dd hh mm这些字符串我们都替换成对应的日期格式,至于yyyy MM之间的连接符是什么,这个是不会被正则表达式匹配到的,所以也不会被替换(比如空格和“-”)