4、Markdown笔记应用开发全解析

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 () {
    // We return the matching note with selectedId
    return this.notes.find(note => note.id === this.selectedId)
  },
}

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

<textarea v-model="s