html
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<style>
.screen {
width: 100px;
height: 60px;
background-color: #FEDFE1;
position: relative;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
</style>
</head>
<body>
<div id="app">
<div class="screen">{{ number }}</div>
<input type="button" :value="buttonText" @click="toggleCounter" />
<input type="button" value="复位" @click="resetCounter" />
</div>
<script>
new Vue({
el: '#app',
data: {
number: 0,
timer: null,
isRunning: false,
buttonText: '开始'
},
methods: {
toggleCounter: function() {
if (!this.isRunning) {
this.isRunning = true;
this.buttonText = '停止';
// 从1开始计数
this.number = 1;
this.timer = setInterval(() => {
// 计数递增
this.number++;
}, 1000);
} else {
clearInterval(this.timer);
this.isRunning = false;
this.buttonText = '开始';
}
},
resetCounter: function() {
clearInterval(this.timer);
this.number = 0;
this.isRunning = false;
this.buttonText = '开始';
}
}
});
</script>
</body>
</html>
