Question

在<template>和<script>中的Vue单个文件组件中启用管道运算符的最简单方法是什么？

示例：

<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 CLI的vue.config.js而不是直接使用webpack配置。

注意：我不想使用Vue filters。 Vue的未来版本中有talk of removing filters，我希望为此功能尝试“标准” 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>

在Vue单个文件组件中启用管道运算符的最简单方法

1 个答案: