使用vue.js写一个代码,令网页显示一个10秒的倒计时,然后显示“终于等到你!!!”
时间: 2024-09-23 20:04:32 浏览: 154
使用Vue.js创建一个简单的倒计时并显示消息可以按照以下步骤进行:
首先,在HTML部分添加一个Vue组件结构,并包含一个用于显示倒计时和最终消息的元素:
```html
<template>
<div id="counter-app">
<h1 v-if="countdown > 0">{{ countdown }} 秒后</h1>
<p v-else>终于等到你!!!</p>
</div>
</template>
```
然后,在JavaScript部分编写Vue实例和数据:
```javascript
<script>
import Vue from 'vue';
export default {
name: 'CountdownApp',
data() {
return {
countdown: 10,
};
},
mounted() {
this.startCountdown();
},
methods: {
startCountdown() {
const intervalId = setInterval(() => {
if (this.countdown > 0) {
this.countdown--;
} else {
clearInterval(intervalId);
this.countdown = 0;
}
}, 1000); // 每隔1秒更新一次
},
},
};
</script>
```
最后,在main.js或其他入口文件中引入并挂载这个组件:
```javascript
import { createApp } from 'vue';
import CountdownApp from './components/CountdownApp.vue';
const app = createApp(CountdownApp);
app.mount('#counter-app');
```
现在,当页面加载时,你会看到一个从10秒开始的倒计时,计时结束后会显示"终于等到你!!!"。
阅读全文
相关推荐






