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

10年的安鄉(xiāng)網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整安鄉(xiāng)建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“安鄉(xiāng)網(wǎng)站設(shè)計(jì)”,“安鄉(xiāng)網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

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

.vue

傳入兩個(gè)參數(shù)

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

使用兩個(gè)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 + "小時(shí)" + minutes + "分鐘";
}

.ts

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

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

場(chǎng)景

在 vue 項(xiàng)目中，團(tuán)隊(duì)成員在模板中解析一個(gè) json 字符串，然后這個(gè)字符串來自于后臺(tái)，所以是類型不安全，直接用 JSON.parse 就報(bào)錯(cuò)了，這里需要用 trycatch 下。

實(shí)際是，因?yàn)檫@個(gè)解析 json 字符串的方法是純函數(shù)，且經(jīng)常用在模板中，所以作為 filter 合適，直接拷貝了其他項(xiàng)目的這個(gè)方法過來作為 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，使用如下

考慮到這個(gè) filter 使用頻繁，所以可以封裝進(jìn)全局 mixin，避免頻繁的引用。

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