|叫做管道符號,管道符號前面是要進行格式化的值,管道符號後面是過濾器的名稱
全局過濾器要定義在new Vue的前面filter
<p>{{msg|toupper}}</p>
Vue.filter('toupper',(v)=>{
return v.charAt(0).toUpperCase(0)+v.substr(1)
})
Vue.filter('過濾器的名字',(v)=>{}),在後面這個函數中處理函數
基礎過濾器:本地過濾器
通過 filters:{過濾器名字:函數(v){}} 定義
在函數中寫具體數據處理格式的邏輯代碼並且return結果
在視圖中使用過濾器
<div class="somes">
本地過濾器
{{somes|tolower}}
</div>
data: function () {
return {
somes:'ABCD'
}
},
filters:{
'tolower':(v)=>{
return v.substring(0,3)+ v.substr(3).toLowerCase()
}
}
跟data,methods同級
過濾器使用注意的事項
過濾器傳參數:其中,默認的第一個參數時要格式化的數據,第二個參數時要傳的值
{{somes|tolower('第二個參數')}}
filters:{
'tolower':(v)=>{
return v.substring(0,3)+ v.substr(3).toLowerCase()
}
}
串聯使用:
將已經更改的數據,再次格式化,其中第二個過濾器處理的是前民過濾器處理完以後的
<div class="chuan">
串聯過濾器
{{count | toplu |tomul}}
</div>
data: function () {
return {
count:1
}
},
filters:{
'toplu':(v)=>{
return v+5
console.log(v)
},
'tomul':(v)=>{
return v*100
console.log(v)
}
},