需求分析:
页面倒计时5秒后进入系统主页,数字需要实时更新!
<template>
<div class="">
<h1>欢迎来到Vue.js项目首页</h1>
<h2>你将在<span style="color:red">{{time}}</span>秒后进入系统</h2>
</div>
</template>
<script>
export default {
name: ‘HelloWorld‘,
data () {
return {
time:0,
}
},
methods:{
countDown(){
let THIS=this;
THIS.time--;
}
},
mounted(){
let THIS=this;
THIS.time=5;
setInterval(THIS.countDown,1000);
},
watch:{
‘time‘:function(newVal,oldVal){
if(newVal==0){
this.$router.push(‘/index‘);
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>