如何使用過濾器的內部指令在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 
    } 
}