先給大家介紹下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，避免頻繁的引用。

參考 https://vuejs.org/v2/guide/fi...

總結

以上所述是小編給大家介紹的vue中filters 傳入兩個參數 / 使用兩個filters的實現方法 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！