vue中如何實現filters傳入兩個參數和使用兩個filters

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

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

.vue

傳入兩個參數

 <van-col>{{第一個參數|formatVisitTime(第二個參數)}}</van-col>

使用兩個filters

<van-tag plain :color="item.CreateTime（參數）|formatVisitDate（filters方法）|formatVisitDateColor（filters方法）">{{item.CreateTime|formatVisitDate}}</van-tag>

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 字符串的方法是純函數，且經常用在模板中，所以作為 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，使用如下

<template>
 <comp :images="li.value | tryParseJsonString([])" />
</template>

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

以上是“vue中如何實現filters傳入兩個參數和使用兩個filters”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！