Javascript 根据变量选择Vue过滤器 我所拥有的

我正在基于Vue2中的2D数组生成一个表。我可以让表格显示得很好，所有的值都在正确的位置，但是我在格式方面遇到了问题。该模板如下所示：

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="row in data">
      <td>{{row[0]}}</td>
      <td>{{row[3]+row[1]+row[4]}}</td>
      <td>{{row[3]+row[2]+row[4]}}</td>
    </tr>
  </tbody>
</table>

var data = [
  ['revenue', 123.4, 153.48, '$'],
  ['cost', 93.26, 109.48, '$'],
  ['profit', 30.14, 44, '$'],
  ['margin', 24.425, 28.668, '', '%']
];

我失败了什么 这很有效。。。伊什。我可以有任何我想要的行，我可以指定前缀或后缀的单位，但它并不完美。最大的问题是货币的小数位数不同。我可以将这些值存储为字符串，但其中一些在计算中被重用，这意味着我必须解析它们

我试过的 正是在这一点上，我遇到了过滤器。因为我继承的这个项目已经有了一堆内置的东西，看起来他们会完全按照我的意愿去做。我可以把它改成

{{row[1]| currency}}

，它会很好地格式化。唯一的问题是我有混合的数据类型。在本例中，

收入

、

成本

和

利润

都是货币值，但

利润

是百分比

理想情况下，我希望在每个数组的第4个索引中指定过滤器：

var data = [
  ['revenue', 123.4, 153.48, 'currency'],
  ['cost', 93.26, 109.48, 'currency'],
  ['profit', 30.14, 44, 'currency'],
  ['margin', 24.425, 28.668, 'percent']
];

然后用类似这样的方法吐出值：

<td>{{row[1] | row[3]}}</td>
<td>{{row[2] | row[3]}}</td>

{{row[1]| row[3]}
{{行[2]|行[3]}

然而，这似乎不起作用。我还尝试了

过滤器[row[3]]

和一系列其他变体，但它的语法似乎不存在。当然，我可以编写自己的格式化函数，然后使用类似的

this.formatters[row[3]]（row[1]）

，但是重新实现已经存在的东西没有多大意义。如果有一种方法可以访问过滤器的底层功能，而不会使它太混乱，我可以这样做，但这似乎并不理想

我想要什么 理想的解决方案是使用现有过滤器格式化表中的所有输出。直接调用值上的函数也可以。如果做不到这一点，我可以使用现有函数预先格式化这些值，并将它们作为字符串存储在一个单独的对象中，但这并不理想。

缺少，但显然无法像您希望的那样动态访问过滤器

最好的选择是像您建议的那样将格式化函数保存在对象中

通过向组件中添加catchall过滤器并将类型作为参数传递，可以使组件更干净：

filters: {
  format(value, type) {
    return this.formatters[type](value);
  }
}

然后在模板中：

<td>{{row[2] | format(row[3]) }}</td>

{{row[2]|格式（row[3]）}

使用

---

并创建自己的过滤器

这将允许您保留数据格式并使用现有过滤器

new Vue({
  el:"#app",
  data:{
    data: [
      ['revenue', 123.4, 153.48, "currency"],
      ['cost', 93.26, 109.48, "currency"],
      ['profit', 30.14, 44, "currency"],
      ['margin', 24.425, 28.668,  "percent"]
    ]
  },
  methods:{
    format(value, filter){
      return Vue.filter(filter)(value)
    }
  }
})

模板

  <tr v-for="row in data">
    <td>{{row[0]}}</td>
    <td>{{format(row[1], row[3])}}</td>
    <td>{{format(row[1], row[3])}}</td>
  </tr>

{{行[0]}
{{格式（行[1]，行[3]）}
{{格式（行[1]，行[3]）}

---

.

这个答案并不能真正解释任何事情。你可能应该添加更多的细节，也许是一个例子，以及我为什么要做我说过我不想做的事情的理由。这正是你需要的，我不知道你以前从未创建过过滤器。这与其他两个答案的提示是一样的，除了创建自己的过滤器的部分。我不需要编写过滤器，这不是“我需要的”。我特别说过，“我当然可以编写自己的格式化函数，然后使用类似于

的东西。格式化程序[row[3]]（row[1]）

，但是重新实现已经存在的东西没有多大意义”。你刚才告诉我应该在一个新的过滤器中重新实现这些函数。更重要的是，其他答案提供了一个推理，而不仅仅是告诉我做些什么。这就是我想要的内容，不是没有解释或推理的小代码片段

Vue.filter（filter）（value）

是我为使解决方案变得整洁而缺少的部分。@3ocene是的，

Vue.filter（）

仅使用过滤器的名称返回过滤器本身。这是一个很好的答案。我会同意这一点，但是@Bert Evan的答案中的

Vue.filter（filter）（value）

调用在我看来只是稍微干净了一点。是的，我没有意识到这一点。如果您想将格式化程序本身用作过滤器，那么这绝对是一种方法。如果需要，还可以返回带有我的答案的

Vue.filter（type）（value）

。这取决于你想如何在模板中写出来。

  <tr v-for="row in data">
    <td>{{row[0]}}</td>
    <td>{{format(row[1], row[3])}}</td>
    <td>{{format(row[1], row[3])}}</td>
  </tr>