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之间的连接符是什么,这个是不会被正则表达式匹配到的,所以也不会被替换(比如空格和“-”)