Простейший метод включения оператора конвейера в компонентах Vue с одним файлом

Question

Какой самый простой способ включения оператора конвейера в компонентах Vue с одним файлом, как в <template>, так и в <script>?

Пример:

<template>
  <span>
    <!-- should display as −15,395.94 -->
    {{ amount |> currency }}
  </span>
</template>

<script>
  const currencyFormatter = new Intl.NumberFormat("en-US", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });

  // though they look like the same symbol, they are not
  const HYPHEN_MINUS = "-";
  const MINUS_SIGN = "−";

  function hyphenToMinus(value) {
    return String(value).replace(HYPHEN_MINUS, MINUS_SIGN);
  }

  export default {
    data: _ => ({
      amount: -15395.94,
    }),
    methods: {
      currency: value => value
        |> currencyFormatter.format
        |> hyphenToMinus
      ,
    },
  };
</script>

Примечание:Я хочу использовать vue.config.js интерфейса Vue вместо того, чтобы работать напрямую с конфигурацией веб-пакета.

Примечание. Я не хочу использовать фильтры Vue .В следующей версии Vue говорится об удалении фильтров , и я надеюсь попробовать «стандартный» синтаксис JS для этой функции.

Об операторе конвейера в Babel: @babel/plugin-proposal-pipeline-operator.

Answer 1

Операторы конвейера называются фильтрами в Vue.js.

Вот документация для этого: https://vuejs.org/v2/guide/filters.html

В вашем случае вы могли бы иметь этот код:

<template>
  <span>
    {{ 15 | double }}
  </span>
</template>

<script>
  export default {
    methods: {
      double: value => value * 2,
    }
  };
</script>