Display three notes with titles and content

by yoyosan

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<div id="app">
  <div class="note">
    <h3 class="title">
      <!-- 請顯示第一個項目的標題 -->
      {{ notes[0].title }}
    </h3>
    <p class="content">
      <!-- 請顯示第一個項目的內容 -->
      {{ notes[0].content }}
    </p>
  </div>
  <div class="note">
    <h3 class="title">
      <!-- 請顯示第二個項目的標題 -->
      {{ notes[1].title }}
    </h3>
    <p class="content">
      <!-- 請顯示第二個項目的內容 -->
      {{ notes[1].content }}
    </p>
  </div>
  <div class="note">
    <h3 class="title">
      <!-- 請顯示第三個項目的標題 -->
      {{ notes[2].title }}
    </h3>
    <p class="content">
      <!-- 請顯示第三個項目的內容 -->
      {{ notes[2].content }}
    </p>
  </div>
</div>

CSS

.note {
  border: 1px solid #eee;
  margin: 10px;
  padding: 5px;
  border-radius: 5px;
  width: 500px;
}

JavaScript

const maincontent = new Vue({
  el:'#app',
  data: {

    notes: [
      {
        title: "春節行程安排",
        content: "吃飽睡，睡飽吃",
        color: "red",
      },
      {
        title: "工作待辦事項",
        content: "詢問各家廠商報價",
        color: "green",
      },
      {
        title: "運動健身計畫",
        content: "每天早上六點去健身",
        color: "blue",
      },
    ]
  }
} )