遍历数组使用vue,做一个记事本。需要基本渲染v-for,有删除功能用filter根据id从数组中删除对应项
时间: 2024-10-16 07:10:51 浏览: 4
在Vue.js中创建一个简单的记事本应用,遍历数组并显示在列表中,通常会结合模板、数据绑定和事件处理。首先,你需要设置一个包含记事本文档的数据数组,然后使用`v-for`指令来渲染每个元素。
1. 数据初始化:
```javascript
data() {
return {
notes: [
{ id: 1, content: '第一条笔记' },
{ id: 2, content: '第二条笔记' },
// 更多笔记...
]
}
}
```
2. 渲染列表:
```html
<template>
<div>
<ul>
<li v-for="note in notes" :key="note.id">
{{ note.content }}
<!-- 删除按钮 -->
<button @click="deleteNote(note.id)">删除</button>
</li>
</ul>
</div>
</template>
```
3. 删除函数实现:
```javascript
methods: {
deleteNote(id) {
this.notes = this.notes.filter(note => note.id !== id);
}
}
```
在这个例子中,每当点击删除按钮,`deleteNote`方法会被调用,它通过`filter()`方法从`notes`数组中移除指定ID的项。`:key`属性用于Vue的虚拟DOM性能优化,确保每个元素都有唯一标识。
阅读全文