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

2025-10-26 18:59:09

1、引入Vue.js框架

<head>

<title>Vue过滤器在网页上动态显示日期时间</title>

<style>

#app span{

color: red;

font-weight: 700;

}

</style>

</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。