時間変換

プロジェクトを行うには間違いなく多くのデータ型が含まれ、データ型を変換できます。フロントエンドがバックエンドから取得する時間が基準を満たしていない場合があります。このとき、変換してから変換する必要があります。使用されます。2つの変換があります。それはあなたが個人的にどちらを好むかによります。ここで時間を例に変換しました

フィルタ

グローバルフィルター

main.jsに書き込む

// 时间戳过滤器
Vue.filter('dateFormat', (dataStr) => {
    
    
  var time = new Date(dataStr)

  function timeAdd0 (str) {
    
    
    if (str < 10) {
    
    
      str = '0' + str
    }
    return str
  }
  var y = time.getFullYear()
  var m = time.getMonth() + 1
  var d = time.getDate()
  var h = time.getHours()
  var mm = time.getMinutes()
  var s = time.getSeconds()
  return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s)
})

このとき、タイムスタンプdetails.createTimeは、計算用のVue.filterのパラメーターdataStrになります。

ローカルフィルター

vue単一ファイルには、周期関数と並置されたfilters属性があります。

現時点では、フィルターはフィルターではないことに注意してください。ローカルでは、通常、グローバルよりも1つ多くなります。たとえば、グローバルコンポーネントとローカルコンポーネントの違いは同じです。

  created(){
    
    
  },
  filters:{
    
    
      dateFormat:function(dataStr){
    
    
        var time = new Date(dataStr)
        function timeAdd0 (str) {
    
    
          if (str < 10) {
    
    
            str = '0' + str
          }
          return str
        }
        var y = time.getFullYear()
        var m = time.getMonth() + 1
        var d = time.getDate()
        var h = time.getHours()
        var mm = time.getMinutes()
        var s = time.getSeconds()
        return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s)
       }
  },

使用する

使用法はグローバルでもローカルでも同じです。フィルタリングされたデータの後に|を追加するだけで済みます。

<span>发布时间：{
   
   {details.createTime|dateFormat}}</span>

JS参照変換

時間変換のためにutilsファイルにjsをビルドします

export function tempToData(unixtimestamp2) {
    
    
  var unixtimestamp = new Date(unixtimestamp2)
  var year = 1900 + unixtimestamp.getYear()
  var month = '0' + (unixtimestamp.getMonth() + 1)
  var date = '0' + unixtimestamp.getDate()
  var hour = '0' + unixtimestamp.getHours()
  var minute = '0' + unixtimestamp.getMinutes()
  var second = '0' + unixtimestamp.getSeconds()
  return year + '-' + month.substring(month.length - 2, month.length) + '-' + date.substring(date.length - 2, date.length) +
    ' ' + hour.substring(hour.length - 2, hour.length) + ':' +
    minute.substring(minute.length - 2, minute.length) + ':' +
    second.substring(second.length - 2, second.length)
}

現時点では、使用する場合は、jsを引用して使用するだけです。

グローバルリファレンス

main.jsで参照するだけです

import {
    
     tempToData } from '@/utils/DataUtils'

ローカルリファレンス

対応するvueファイルでの参照

import {
    
     tempToData } from '@/utils/DataUtils'

使い方

<span>{
   
   { mTempToData(details.createTime) }}</span>

総括する

2つの方法にはそれぞれメリットがありますが、個人的にはフィルターの使用を好みます。
学習プロセスでは、相互に推論を引き出すことを学びます。

vue時間変換のいくつかの方法

変換