1、案例1
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>过滤器</title> </head> <body> <div id="app"> <p>原格式:{{date}}</p> <!-- dateString指定自定义过滤器 --> <p>年月日时分秒:{{date | dateString}}</p> <p>年月日:{{date | dateString('YYYY-MM-DD')}}</p> <p>时分秒:{{date | dateString('HH:mm:ss')}}</p> <p>年月日时分秒(ES6语法形参默认值写法):{{date | dateString2}}</p> <p>年月日(ES6语法形参默认值写法):{{date | dateString2('YYYY-MM-DD')}}</p> </div> <script src="../js/vue.js" type="text/javascript"></script> <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js" type="text/javascript"></script> <script> //自定义过滤器，必须写在Vue实例前 Vue.filter("dateString", function (value, format) { //若有传format参数则按format格式进行格式化 //若没有传format参数则按YYYY-MM-DD HH:mm:ss格式进行格式化 return moment(value).format(format || "YYYY-MM-DD HH:mm:ss"); }); //format="YYYY-MM-DD HH:mm:ss"是ES6形参默认值写法 //若format有传则使用传过来的值，format没传则使用默认值 Vue.filter("dateString2", function (value, format = "YYYY-MM-DD HH:mm:ss") { return moment(value).format(format); }); const vm = new Vue({ el: "#app", data: { date: new Date() } }); </script> </body> </html>