4、Vue.js Markdown笔记应用开发指南

Vue.js Markdown笔记应用开发指南

1. 笔记选择与显示

在笔记列表中，为每个笔记项添加点击事件监听，使用 v-on 指令：

<div class="notes">
  <div class="note" v-for="note of notes" @click="selectNote(note)">{
  
  {note.title}}</div>
</div>

点击笔记时， selectedId 数据属性会更新。为了方便访问当前选中的笔记，创建一个计算属性 selectedNote ：

computed: {
  selectedNote () {
    return this.notes.find(note => note.id === this.selectedId)
  },
}

将旧的 content 数据属性替换为 selectedNote.content ，修改模板中的编辑器：

<textarea v-model="selectedNote.content"></textarea>

同时，修改