Vue 插值和表达式

原创于 2020-06-11 14:58:25 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

前端技术同时被 3 个专栏收录

9 篇文章

订阅专栏

Vue

4 篇文章

订阅专栏

javascript

2 篇文章

订阅专栏

本文展示了一个使用Vue.js实现的实时更新当前日期时间的示例。通过在Vue实例的data属性中定义一个date变量，并利用setInterval定时器每秒更新这个变量，页面上的日期时间会随之实时变化。

Vue 插值和表达式

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue</title>
</head>
<body> 
<div id="app">
	{{date}}
</div> 
<script src="https://unpkg.com/vue/dist/vue.min.js"></script> 
<script> 
var app =new Vue({
el : '#app', 
data: { 
	date: new Date ()
},

mounted: function () { 
	var _this = this; 			//声明一个变量指向Vue实例this，保证作用域一致
	this.timer= setInterval(function() { 
		_this.date= new Date(); 	//修改数据 date
		} ,1000);
	},

beforeDestroy: function(){ 
	if (this. timer) { 
		clearInterval(this.timer); 	//:在Vue实例销毁前，清除我们的定时器
		}
	}
})
</script> 
</body>
</html>