使用Vue过滤器在当前网页上动态显示日期时间

2025-10-18 15:39:35

1、引入Vue.js框架

<head>

2、创建一个HTML元素在网页上显示日期时间，并与Vue实例进行数据绑定

当前时间：<span>{{ date | formaDate }}</span>
</div>

3、创建一个Vue实例

//创建一个函数来增加月日时小于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、运行网页文件，查看显示效果(如图所示)

使用Vue过滤器在当前网页上动态显示日期时间

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。