Pass two parameters in filters in vue / implementation method using two filters

First, let me introduce to you two parameters in vue: filters pass in two parameters / use two filters

.vue

Pass in two parameters

 <van-col>{{The first parameter|formatVisitTime(The second parameter)}}</van-col>

Use two filters

<van-tag plain :color="(parameters)|formatVisitDate(filters method)|formatVisitDateColor(filters method)">{{|formatVisitDate}}</van-tag>

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 = (() - ());
  let hours = (mss / (1000 * 60 * 60));
  let minutes = ((mss % (1000 * 60 * 60)) / (1000 * 60));
  return hours + "Hour" + minutes + "minute";
}

.ts

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

ps: Let's take a look at the filter in Vue with multiple parameters

Scene

In the vue project, team members parse a json string in the template, and then this string comes from the background, so the type is unsafe, so if you use it directly, you will report an error. Here you need to use trycatch.

In fact, because this method of parsing json strings is a pure function and is often used in templates, it is suitable as a filter. This method of copying other projects is used as fitlers, as follows.

// omit other properties
 filters: {
  tryParseJsonString(jsonStr, defaultValue) {
   let ret = defaultValue;
   if (jsonStr) {
    try {
     ret = (jsonStr) || defaultValue;
    } catch (e) {
     ('JSON format is incorrect, parsing failed', );
    }
   }

   return ret;
  }
 },
// ...

In the template, you can bind to v-bind, using the following

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

Considering that this filter is frequently used, it can be encapsulated into a global mixin to avoid frequent references.

refer to/v2/guide/fi...

Summarize

The above is the implementation method of passing two parameters in filters in vue introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!