1入偷、 定義:對要品示的數(shù)據(jù)進(jìn)行特定格化后再顯示(適用于些簡單邏輯的處理)瘩欺。
2脖岛、語法:
1.注冊過濾器: Vue.filter(name,callback)或new Vue{filters:{}}
2.使用過濾器: {{ xx| 過濾器名}} 或v-bind:屬性= "xxx| 過濾器名"
3隧出、 備注:
1.過濾器也可以按收額外參數(shù)怎栽、多個過濾器也可以串聯(lián)
2.并沒有改變原本的數(shù)據(jù)丽猬，是產(chǎn)生新的對應(yīng)的數(shù)據(jù)
<div id="root">
<h1>顯示格式化時間</h1>
<!-- 計算屬性實現(xiàn) -->
<h2>現(xiàn)在 ： {{fmtTime}}</h2>
<!-- methods實現(xiàn) -->
<h2>現(xiàn)在 ： {{getFmtTime()}}</h2>
<!-- 過濾器實現(xiàn) -->
<h2>{{time | timeFormater}}</h2>
<h2>{{time | timeFormater('YYYY年MM月DD日')}}</h2>
</div>
<script>
Vue.config.productionTip = false; //阻止vue在啟動時生成生產(chǎn)提示
// 全局過濾器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
//創(chuàng)建Vue實例
const vm = new Vue({ //ViewModel
el: '#root',
data: {
time : 12554565215545
},
methods: {
getFmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
computed : {
fmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
// 過濾器
filters : {
timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
console.log('@@@',value);
return dayjs(value).format(str)
}
}
});
// console.log(vm);
</script>
