vue入門 vue基礎之簡單使用4--過濾器(Filter)
指令集:指令集是指指令的集合 ,而指令:凡是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();
}
}
});
相關文章
- vue 基礎入門筆記 07:過濾器Vue筆記過濾器
- 如何在vue中使用過濾器filterVue過濾器Filter
- 【SSO】--單點登入之過濾器(filter)過濾器Filter
- Vue定義全域性過濾器filterVue過濾器Filter
- Vue簡單入門Vue
- Vue-vue基礎快速入門Vue
- 【Java基礎】--filter過濾器原理解析JavaFilter過濾器
- vue 過濾器Vue過濾器
- Vue過濾器Vue過濾器
- vue從入門到進階:過濾器filters(五)Vue過濾器Filter
- Filter過濾器的使用Filter過濾器
- Vue中過濾器Vue過濾器
- vue---過濾器Vue過濾器
- vue filters過濾器VueFilter過濾器
- 換個角度使用VUE過濾器Vue過濾器
- Filter過濾器Filter過濾器
- vue 基礎入門筆記 01Vue筆記
- vue 基礎入門筆記 02Vue筆記
- vue 基礎入門筆記 03Vue筆記
- vue 基礎入門筆記 04Vue筆記
- vue 基礎入門筆記 05Vue筆記
- vue 基礎入門筆記 06Vue筆記
- vue 基礎入門筆記 07Vue筆記
- vue 基礎入門筆記 08Vue筆記
- vue 基礎入門筆記 09Vue筆記
- vue 基礎入門筆記 10Vue筆記
- vue 基礎入門筆記 11Vue筆記
- vue 基礎入門筆記 12Vue筆記
- vue 基礎入門筆記 13Vue筆記
- vue 基礎入門筆記 14Vue筆記
- vue 基礎入門筆記 15Vue筆記
- vue 快速入門 系列 —— Vuex 基礎Vue
- vue 快速入門 系列 —— vue 的基礎應用(上)Vue
- vue 快速入門 系列 —— vue 的基礎應用(下)Vue
- Vue入門到關門之Vue介紹與使用Vue
- Vue案例引發的「過濾器」的使用Vue過濾器
- PHP基礎之過濾器講解PHP過濾器
- PHP 過濾器(Filter)PHP過濾器Filter