{{rateTime}}大括號裡面的數字轉換為字串（日期）

MayDo發表於2018-12-07
字串

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之間的連線符是什麼，這個是不會被正規表示式匹配到的，所以也不會被替換（比如空格和“-”）


相關文章