Vue.js是JavaScript編寫的MVVM框架，它使我們能夠構建動態Web用戶界面（UI）。 Vue.js的強項在于其“響應式”（Reactiveness）能力，這意味著當我們更改數據時，它會自動重新渲染web頁面，以反映新的數據。

VUE的主要優勢之一是通過過濾器(filter)捕獲數據并操作它。Vue.filter()方法是在Vue.js中定義過濾器的方法。 過濾器返回函數，該函數將被用來轉化綁定到的數據。

Vue.filter('hundredsCurrency', function (money) { 
// convert to string
money = money.toString();
var result = '', counter = 0;
for (var i = money.length - 1; i >= 0; i--) {
counter++;
result = money.charAt(i) + result;
if (!(counter % 3) && i != 0) {
result = ',' + result;
}
}
return result;
})

然后，在Vue.js的template中我們可以通過將filter名稱添加到模板表達式中來調用它。并在{{ }}中附加符號 "|", 這個符號告訴Vue要使用過濾器。

{{ price | hundredsCurrency }}

在以上的代碼中，“price”是我們在組件中定義的變量。“hundredsCurrency”是過濾器的名稱。 在組件中，數據是以“屬性(property)”的形式來處理的。我們可以通過Vue.js提供的數據模型（Model）來定義這些屬性。

var app = new Vue({
el: '#app',
data: {
price: 1234567
},
})

通過這些簡單的步驟，我們就可以在Vue.js中調用和使用過濾器。 過濾器的作用是過濾和操作數據。 Vue在模板中使用管道符“|”將過濾器應用到綁定的值。 過濾器是Vue.js提供的一個非常便捷的功能，它使得數據的操作和處理變得更加簡單和直觀。