如何使用过滤器的内部指令在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 
    } 
}