1憨募、 定義:對(duì)要品示的數(shù)據(jù)進(jìn)行特定格化后再顯示(適用于些簡(jiǎn)單邏輯的處理)灶挟。
2、語(yǔ)法:
- 1.注冊(cè)過(guò)濾器: Vue.filter(name,callback)或new Vue{filters:{}}
- 2.使用過(guò)濾器: {{ xx| 過(guò)濾器名}} 或v-bind:屬性= "xxx| 過(guò)濾器名"
3、 備注:
- 1.過(guò)濾器也可以按收額外參數(shù)摘悴、多個(gè)過(guò)濾器也可以串聯(lián)
- 2.并沒(méi)有改變?cè)镜臄?shù)據(jù)，是產(chǎn)生新的對(duì)應(yīng)的數(shù)據(jù)
<div id="root">
<h1>顯示格式化時(shí)間</h1>
<!-- 計(jì)算屬性實(shí)現(xiàn) -->
<h2>現(xiàn)在 ： {{fmtTime}}</h2>
<!-- methods實(shí)現(xiàn) -->
<h2>現(xiàn)在 ： {{getFmtTime()}}</h2>
<!-- 過(guò)濾器實(shí)現(xiàn) -->
<h2>{{time | timeFormater}}</h2>
<h2>{{time | timeFormater('YYYY年MM月DD日')}}</h2>
</div>
<script>
Vue.config.productionTip = false; //阻止vue在啟動(dòng)時(shí)生成生產(chǎn)提示
// 全局過(guò)濾器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
//創(chuàng)建Vue實(shí)例
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')
}
},
// 過(guò)濾器
filters : {
timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
console.log('@@@',value);
return dayjs(value).format(str)
}
}
});
// console.log(vm);
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
