這篇文章主要為大家展示了“vue中如何實現(xiàn)filters傳入兩個參數(shù)和使用兩個filters”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習一下“vue中如何實現(xiàn)filters傳入兩個參數(shù)和使用兩個filters”這篇文章吧。

成都創(chuàng)新互聯(lián)是一家專業(yè)提供隆回企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為隆回眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進行中。

先給大家介紹下vue中filters 傳入兩個參數(shù) / 使用兩個filters

.vue

傳入兩個參數(shù)

 {{第一個參數(shù)|formatVisitTime(第二個參數(shù))}}

使用兩個filters

{{item.CreateTime|formatVisitDate}}

format.js

export const formatVisitTime = (beginTime, finishTime) => {
  if (!beginTime) {
    return "--";
  }
  if (!finishTime) {
    return formatDateTime(beginTime, 'hh:mm:ss')
  }
  beginTime = new Date(beginTime);
  finishTime = new Date(finishTime);
  let mss = Math.abs(beginTime.getTime() - finishTime.getTime());
  let hours = Math.floor(mss / (1000 * 60 * 60));
  let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
  return hours + "小時" + minutes + "分鐘";
}

.ts

import format from "@/plugins/format";
@Component({
 filters: {
  formatVisitTime(beginTime, finishTime) {
   return format.formatVisitTime(beginTime, finishTime);
  }
 }
})

ps:下面看下Vue 中的 filter 帶多參

場景

在 vue 項目中，團隊成員在模板中解析一個 json 字符串，然后這個字符串來自于后臺，所以是類型不安全，直接用 JSON.parse 就報錯了，這里需要用 trycatch 下。

實際是，因為這個解析 json 字符串的方法是純函數(shù)，且經(jīng)常用在模板中，所以作為 filter 合適，直接拷貝了其他項目的這個方法過來作為 fitlers 用，如下。

// omit other properties
 filters: {
  tryParseJsonString(jsonStr, defaultValue) {
   let ret = defaultValue;
   if (jsonStr) {
    try {
     ret = JSON.parse(jsonStr) || defaultValue;
    } catch (e) {
     console.warn('JSON格式不正確，解析失敗', e.message);
    }
   }

   return ret;
  }
 },
// ...

在模板中，可以綁定到 v-bind，使用如下

考慮到這個 filter 使用頻繁，所以可以封裝進全局 mixin，避免頻繁的引用。

以上是“vue中如何實現(xiàn)filters傳入兩個參數(shù)和使用兩個filters”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站題目：vue中如何實現(xiàn)filters傳入兩個參數(shù)和使用兩個filters-創(chuàng)新互聯(lián)
文章地址：http://weahome.cn/article/doisds.html