<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>添加一个方法如果输入的单词和已存在单词一致则删除一致的单词
时间: 2023-07-19 22:45:03 浏览: 44
你可以在 methods 中添加一个名为 removeWord 的方法,实现遍历 words 数组,如果有与 practiceWord 相同的单词,则将其删除。
代码实现如下:
```
methods: {
addWord() {
if (this.newWord) {
this.words.push(this.newWord.trim());
this.newWord = "";
}
},
removeWord() {
for (let i = 0; i < this.words.length; i++) {
if (this.words[i] === this.practiceWord) {
this.words.splice(i, 1);
break;
}
}
}
},
```
你可以将 removeWord 方法绑定到一个按钮上,例如:
```
<button @click="removeWord" class="Remove">删除</button>
```
这样,当用户输入相同单词并点击删除按钮时,相同的单词将被删除。
相关问题
<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>
<template> <div class="word-container"> <div class="word" v-for="(word, index) in words" :key="index">{{ word }}</div> </div> </template> <script> export default { data() { return { words: ['Hello', 'World', 'Vue'] } } } </script> <style> .word-container { 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; } </style>添加一个输入款
好的,你可以在模板中添加一个输入框,然后通过`v-model`指令将输入框的值绑定到`words`数组中,代码如下所示:
```html
<template>
<div class="word-container">
<div class="word" v-for="(word, index) in words" :key="index">{{ word }}</div>
<input type="text" v-model="newWord" placeholder="请输入新单词">
<button @click="addWord">添加</button>
</div>
</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 {
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;
}
</style>
```
以上代码中,在模板中添加了一个`<input>`和一个`<button>`,然后通过`v-model`指令将输入框的值绑定到`newWord`变量中,绑定按钮的`click`事件,当按钮被点击时调用`addWord`方法,将新单词添加到`words`数组中,并清空输入框的值。