如何在vuejs中使用指令内的过滤器

Question

我想在v-text中使用过滤器，如下所示：

..
<tr v-for="item in data.data">
  <td v-text="item.XX | myFilter"></td>
</tr>

但myFilter不起作用。我不想使用{{item.XX | myFilter}}。

Answer 1

根据the documentation：

  

Vue 2.x过滤器只能在胡子绑定中使用。要在指令绑定中实现相同的行为，您应该使用Computed properties代替。

所以你无法实现你在那里尝试的东西。相反，item需要一个直接返回转换值的属性。

Answer 2

您可以使用计算属性+方法执行此操作。 而不是：

<td v-text="item.XX | myFilter"></td>

使用：

<td v-text="myFilter(item.xx)"></td>

并在您的脚本部分添加：

methods: {
  myFilter(item) {
    // your filter logic
  }
}

Answer 3

您可以尝试以下方法：

<tr v-for="item in data.data">
  <td :text-content.prop="item.XX | myFilter"></td>
</tr>