需求分析:
页面倒计时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>