遍历数组使用vue，做一个记事本。需要基本渲染v-for，有删除功能用filter根据id从数组中删除对应项

在Vue.js中创建一个简单的记事本应用，遍历数组并显示在列表中，通常会结合模板、数据绑定和事件处理。首先，你需要设置一个包含记事本文档的数据数组，然后使用`v-for`指令来渲染每个元素。

1. 数据初始化：

data() {
  return {
    notes: [
      { id: 1, content: '第一条笔记' },
      { id: 2, content: '第二条笔记' },
      // 更多笔记...
    ]
  }
}

2. 渲染列表：

<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. 删除函数实现：

methods: {
  deleteNote(id) {
    this.notes = this.notes.filter(note => note.id !== id);
  }
}

在这个例子中，每当点击删除按钮，`deleteNote`方法会被调用，它通过`filter()`方法从`notes`数组中移除指定ID的项。`:key`属性用于Vue的虚拟DOM性能优化，确保每个元素都有唯一标识。