Javascript - Vue - 過濾器

過濾器

輸出的數據由vue對象提供，但它的數據可能須要作進一步的處理才適合展現給用戶看，爲此，能夠在靜態的Vue上定義一個過濾器對實例vue對象的data數據進行過濾處理。

//調用過濾器
//msg是返回數據的變量
//format是指定的過濾器，這個過濾器定義在Vue上
<p>{{ msg | format }}</p>

//在靜態Vue上定義過濾器，data是原來的msg
Vue.filter('format', function (data) {
    return data.replace(new RegExp('x','gm'),'a');
});

向過濾器傳參

<p>{{msg | format('hello') }}</p>

Vue.filter('format', function (data,arg) {
    return data.replace(new RegExp('x', 'gm'), arg);
});

能夠鏈式調用過濾器，第一過濾器處理完成後會自動調用後面的處理器

<p>{{msg | format | format2 | format3 }}</p>

私有過濾器

能夠在vue實例中定義私有的過濾器，但若是同時靜態vue也存在同名的過濾器，則使用就近原則（優先使用vue實例定義的過濾器）

<div id="app">
    {{msg | filter1}}
</div>

var vueObj = new Vue({
    el: "#app",
    data: {
        msg:"xxx"
    },
    filters: {
        filter1: function (data) {
            return data.replace(new RegExp("x", "gm"), "a");
        }
    }
});

 

Javascript - 學習總目錄