1.用到的方法
Vue的filter（）方法
1.語法各式：Vue.filter('過濾器名字',處理函數(shù) )
2.定時器
2.實現(xiàn)步驟
先要引入moment庫來實現(xiàn)過濾時間
定義一個過濾器继效，通過在處理函數(shù)里去返回一個過濾后的時間
moment后面帶的參數(shù)就是需要被過濾的時間蓖救，format后面帶的則是過濾后的各式
這樣一個過濾器就定義好了柜候，然后在頁面中渲染出來即可
還可以通過多傳一個參數(shù)兔簇，來限制一下過濾之后的數(shù)據(jù)
只需要在定義的時候給過濾器的處理函數(shù)多傳一個參數(shù)，然后在下方返回值里的各式里加上一個判斷震肮，當(dāng)有傳各式參數(shù)的時候纸颜，就按各式參數(shù)顯示數(shù)據(jù)的烁，沒傳的話就按原本設(shè)置的各式顯示
同時，只需要在渲染的時候在過濾器后面加上想要指定的日期各式即可
實現(xiàn)效果
現(xiàn)在的數(shù)據(jù)在頁面中是死的不會變迟赃，要想實現(xiàn)會動的時間陪拘，只需要再頁面加載數(shù)據(jù)的時候定義一個定時器即可
這里要注意，實在vue的生命周期函數(shù)mounted（）里面定義的捺氢，設(shè)置這個定時器一秒更新一次藻丢，就可以實現(xiàn)頁面會動的時間顯示啦
代碼：
<!DOCTYPE html>
<html lang="en">
? ? <meta charset="UTF-8">
? ? <title>Title
? ? <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">
? ? <script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js">
<div id="app">
? ? 原始版時間：<p>{{time}}
? ? 過濾之后：<p>{{time | guolvqi}}
? ? 只顯示年月日：<p>{{time | guolvqi('YYYY-MM-DD')}}
? ? 只顯示時分秒：<p>{{time | guolvqi('HH:mm:ss')}}
? ? Vue.filter('過濾器名字',function (value) {
return(moment(value).format('YYYY-MM-DD HH:mm:ss'))
})
Vue.filter('guolvqi',function (value,geshi) {
return(moment(value).format(geshi ||'YYYY-MM-DD HH:mm:ss'))
})
new Vue({
el:"#app",
? ? ? ? data:{
time:new Date(),
? ? ? ? },
? ? ? ? mounted() {
setInterval(()=>{
this.time=new Date()
},1000)
}
})
</html>
