vue入門 vue基礎之簡單使用4--過濾器(Filter)

Ca_va發表於2020-11-09

指令集:指令集是指指令的集合 ,而指令:凡是v-開頭的都是vue指令
詳細程式碼看最後

全域性Filter

基礎使用

定義

        Vue.filter("price",function(value){
            return value.toFixed(2);
        });

引數一是定義的過濾器名稱,引數二是回撥函式(此處傳參是money的值)
回撥函式可以用匿名函式來取代

       Vue.filter("price",  value => value.toFixed(2));

使用

    <div id="app">
        {{money|price}}
    </div>
---------js
            var vm = new Vue({
            el: "#app",
            data: {
                money: 10
            }
        });

在指定得資料後面加上過濾器得名稱即可
但注意的是,此處的price其實是簡寫,此處原寫法是price(),因為是空參,所以可以省略。而如果是要有其他引數時,比如需要輸入一個引數,來設定小數後幾位,則可以有:

 {{money|priceAuto(1)}}<br>
--------------js
Vue.filter("priceAuto",(value,val)=>value.toFixed(val)); 

此處的數字1即為傳入的val引數。當然,此處定義函式時,可以使用vue的擴充套件變數 即Vue.filter(“name”,function(val,…args)){}),這樣使用過濾器時可以輸入無限個變數,此時args是一個陣列

過濾器的疊加使用

先新增一個過濾器,用於聯結字串

        Vue.filter("addSymbol",(value,text)=>{
            return text+value;
        })

然後與上面的priceAuto聯合使用

        {{money|priceAuto(1)|addSymbol("¥")}}<br>

過濾器的疊加使用時,是從前往後執行。

區域性Filter

區域性Filter除了是在new Vue()物件內,其他無大概區別

    <div id="app">
        {{msg|upper}}
    </div>
   var vm = new Vue({
            el: "#app",
            data: {
                money: 10, 
                msg:"niuBi"
            },
            methods: {

            },
            filters:{
                upper:function(value){
                    return value.toUpperCase();
                }
            }
        });

相關文章