Vue单文件组件中启用管道操作符的最简单方法

Posted 2023-02-23

【中文标题】Vue单文件组件中启用管道操作符的最简单方法

【英文标题】：Simplest method for enabling the pipeline operator in Vue single file components

【发布时间】：2019-09-30 13:34:29

【问题描述】：

在<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。 talk of removing filters 在 Vue 的未来版本中，我希望为这个功能尝试“标准”JS 语法。

关于 Babel 中的管道运算符：@babel/plugin-proposal-pipeline-operator。

【参考方案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）有人谈到在未来版本的 Vue 中删除过滤器，（2）我还想在

【参考方案2】：

经过两天的研究，终于找到了 Vue 3 的答案。不过不知道它是否适用于 Vue 2。

要在单个文件组件的模板中启用babel plugins，您需要在vue-loader loader 的参数compilerOptions.expressionPlugins 中指定它们。

如果你使用 Vue CLI：

// vue.config.js
module.exports = 
  chainWebpack: config => 
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => 
        options.compilerOptions = 
          expressionPlugins: [['pipelineOperator',  proposal: 'fsharp' ]],
        
        return options
      )
  ,

如果你使用 Webpack：

// webpack.config.json
module.exports = 
  // other options
  module: 
    rules: [
      // other rules
      
        test: /\.vue$/,
        use: 
          loader: 'vue-loader',
          options: 
            compilerOptions: 
              expressionPlugins: [['pipelineOperator',  proposal: 'fsharp' ]],
            ,
          ,
        ,
      ,
    ]