整合上面的代码
时间: 2023-07-02 11:11:41 浏览: 45
好的,以下是整合后的代码。这段代码实现了增加、删除、修改和查询数据的功能。
```html
<div id="app">
<input v-model="newItem">
<button @click="addItem">添加</button>
<br><br>
<ul>
<li v-for="(item, index) in filteredItems" :key="index">
<span v-if="!item.isEditing">{{ item.content }}</span>
<input v-else v-model="item.content">
<button @click="toggleEdit(index)">{{ item.isEditing ? "保存" : "编辑" }}</button>
<button @click="removeItem(index)">删除</button>
</li>
</ul>
<br>
<input v-model="searchText">
<ul>
<li v-for="(item, index) in filteredItems" :key="index">{{ item.content }}</li>
</ul>
</div>
```
```javascript
new Vue({
el: "#app",
data: {
newItem: "",
searchText: "",
items: [
{ content: "item1", isEditing: false },
{ content: "item2", isEditing: false },
{ content: "item3", isEditing: false }
]
},
methods: {
addItem() {
this.items.push({ content: this.newItem, isEditing: false });
this.newItem = "";
},
removeItem(index) {
this.items.splice(index, 1);
},
toggleEdit(index) {
this.items[index].isEditing = !this.items[index].isEditing;
}
},
computed: {
filteredItems() {
return this.items.filter(item => item.content.includes(this.searchText));
}
}
});
```
这段代码实现了一个简单的待办事项列表。你可以在输入框中输入新的事项,点击“添加”按钮将其添加到列表中;点击事项后面的“编辑”按钮可以修改该事项的内容,点击“保存”按钮保存修改;点击事项后面的“删除”按钮可以删除该事项;在搜索框中输入文本可以实现对事项的筛选。