1、引入Vue.js框架<head> <meta charset="UTF-8"> <title>Vue过滤器在网页上动态显示日期时间</title> <script src="../lib/vue.js"></script> <style> #app span{ color: red; font-weight: 700; } </style></head>
2、创建一个HTML元素在网页上显示日期时间，并与Vue实例进行数据绑定<div id="app"> 当前时间：<span>{{ date | formaDate }}</span></div>
3、创建一个Vue实例<script> //创建一个函数来增加月日时小于10在前面加0 var padaDate = function(value){ return value<10 ? '0'+value : value; }; //数据绑定到id为app的div var app = new Vue({ el:'#app', data:{ date:new Date() },//自定义日期格式显示样式 filters:{ //设置一个函数来进行过滤 formaDate:function(value){ //创建一个时间日期对象 var date = new Date(); var year = date.getFullYear(); //存储年 var month = padaDate(date.getMonth()+1); //存储月份 var day = padaDate(date.getDate()); //存储日期 var hours = padaDate(date.getHours()); //存储时 var minutes = padaDate(date.getMinutes()); //存储分 var seconds = padaDate(date.getSeconds()); //存储秒 //返回格式化后的日期 return year+'年'+month+'月'+day+'日'+hours+'时'+minutes+'分'+seconds+'秒'; } }, mounted:function(){ //创建定时器更新时间 var _this = this; this.timeId= setInterval(function(){ _this.date = new Date(); },1000); }, beforeDestroy:function(){ //实例销毁前青出于定时器 if(this.timeId){ clearInterval(this.timeId); } } })</script>
4、运行网页文件，查看显示效果(如图所示)
