用vue写一段代码用户可以自建不限数量的单词书。 在创建单词书时,需要用户自己输入单词以及单词的词性、中文释义。 用户创建完单词书后,仍然可以对已创建的单词书进行局部的增、删、改。
时间: 2024-05-23 08:15:14 浏览: 44
WEB前端开发常用英语单词和语句汇总, 里面包含web前端开发常用的英语单词和常用语句,掌握好英语对编程有事半功倍的效果
好的,这个问题是属于技术问题,我可以为您解答。以下是用Vue编写的示例代码,用户可以自建不限数量的单词书,并且可以对已创建的单词书进行局部的增、删、改:
<template>
<div>
<h1>创建单词书</h1>
<input type="text" v-model="bookName" placeholder="请输入单词书名称">
<button @click="createNewBook">创建</button>
<hr>
<h1>已创建单词书列表</h1>
<ul>
<li v-for="book in createdBooks">
<h2>{{ book.name }}</h2>
<ul>
<li v-for="(word, index) in book.words">
{{ word.word }} - {{ word.pos }} - {{ word.translation }}
<button @click="editWord(book.name, index)">编辑</button>
<button @click="deleteWord(book.name, index)">删除</button>
</li>
</ul>
<button @click="addWord(book.name)">添加单词</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
bookName: '',
createdBooks: []
}
},
methods: {
createNewBook() {
let newBook = {
name: this.bookName,
words: []
}
this.createdBooks.push(newBook)
this.bookName = ''
},
addWord(bookName) {
let book = this.createdBooks.find(b => b.name === bookName)
let newWord = {
word: '',
pos: '',
translation: ''
}
book.words.push(newWord)
},
editWord(bookName, wordIndex) {
let book = this.createdBooks.find(b => b.name === bookName)
let word = book.words[wordIndex]
let newWord = prompt("请输入单词、词性以及中文释义,用逗号分隔", `${word.word},${word.pos},${word.translation}`)
let [newWordText, newPos, newTranslation] = newWord.split(",")
word.word = newWordText
word.pos = newPos
word.translation = newTranslation
},
deleteWord(bookName, wordIndex) {
let book = this.createdBooks.find(b => b.name === bookName)
book.words.splice(wordIndex, 1)
}
}
}
</script>
阅读全文