VUE：過濾器及日期格式化moment庫
阿新 • • 發佈：2018-11-15
VUE：過濾器及日期格式化moment庫
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>11_過濾器</title> </head> <body> <!-- 1）定義過濾器 Vue.filter(filterName,function(value[arg1,arg2,...])){ //進行一定的陣列處理 return newValue } 2）使用過濾器 <div>{{myData | filterName}}</div> <div>{{myData | filterName{arg}}}</div>--> <!-- 需求：對當前時間進行指定格式顯示 --> <div id="test"> <h2>顯示格式化的日期時間</h2> <p>{{date}}</p> <p>完整版：{{date | dateString}}</p> <p>年月日：{{date | dateString('YYYY-MM-DD')}}</p> <p>時分秒：{{date | dateString('HH:mm:ss')}}</p> </div> <script type="text/javascript" src="../js/vue.js" ></script> <!-- moment日期格式化的庫：地址：momentjs.cn --> <script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.21.0/moment.js"></script> <script> //自定義過濾器 //思考：函式物件（Vue為一個函式，作為物件來使用） // Vue.filter('dateString',function(value,format){ // return moment(value).format(format||'YYYY-MM-DD HH:mm:ss') // }) //也可以用形參預設值 Vue.filter('dateString',function(value,format='YYYY-MM-DD HH:mm:ss'){ return moment(value).format(format) }) new Vue({ el:'#test', data:{ date:new Date() } }) </script> </body> </html>