<template> <view > <view class="word-container"> <view class="word" v-for="(word, index) in words" :key="index">{{ word }}</view> </view> <input type="text" v-model="newWord" placeholder="请输入新单词"> <button @click="addWord" class="Add">添加</button> <input type="text" v-model="newWord" placeholder="请输入练习单词"> </view> </template> <script> export default { data() { return { words: ['Hello', 'World', 'Vue'], newWord: '' } }, methods: { addWord() { if (this.newWord) { this.words.push(this.newWord.trim()) this.newWord = '' } } } } </script> <style> .word-container { border: 1px solid red; display: flex; flex-wrap: wrap; justify-content: center; } .word { margin: 10px; padding: 10px; font-size: 24px; font-weight: bold; background-color: #f0f0f0; border-radius: 5px; text-align: center; } .Add{ } </style>添加一个计时功能

你可以在 data 中新增一个计时器变量，然后在 mounted 钩子函数中使用 setInterval 方法来定时更新计时器变量。同时，你可以在页面上显示计时器的时间。修改后的代码如下：

<template>
<view>
<view class="word-container">
<view class="word" v-for="(word, index) in words" :key="index">{{ word }}</view>
</view>
<<input type="text" v-model="newWord" placeholder="请输入新单词">
<<button @click="addWord" class="Add">添加</button>
<input type="text" v-model="practiceWord" placeholder="请输入练习单词">
<view class="timer">{{ timer }}</view>
</view>
</template>

<script>
export default {
data() {
return {
words: ["Hello", "World", "Vue"],
newWord: "",
practiceWord: "",
timer: 0,
};
},
mounted() {
setInterval(() => {
this.timer++;
}, 1000);
},
methods: {
addWord() {
if (this.newWord) {
this.words.push(this.newWord.trim());
this.newWord = "";
}
},
},
};
</script>

<style>
.word-container {
border: 1px solid red;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.word {
margin: 10px;
padding: 10px;
font-size: 24px;
font-weight: bold;
background-color: #f0f0f0;
border-radius: 5px;
text-align: center;
}
.Add {
}
.timer {
font-size: 24px;
margin-top: 20px;
text-align: center;
}
</style>