JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<h1 style="text-align: center;">JavaScript 系列七：第3課 ── 學習 Vue 條件判斷式的寫法</h1>

<div id="app">
  <!-- 因為border-color不是純文字，有符號(-)，所以要引號(單雙引號交錯使用)起來 -->
  <div class="note" :style="{ color: notes[0].color, 'border-color': notes[0].color}">
    <h3 class=" title">
      <!-- 請顯示第一個項目的標題 -->
      {{ notes[0].title }}
    </h3>
    <p class="content">
      <!-- 請顯示第一個項目的內容 -->
      {{ notes[0].content }}
    </p>
  </div>
  <!-- 因為border-color不是純文字，有符號(-)，所以要單引號起來 -->
  <div class="note" :style="{ color: notes[1].color, 'border-color': notes[1].color}">
    <h3 class=" title">
      <!-- 請顯示第二個項目的標題 -->
      {{ notes[1].title }}
    </h3>
    <p class="content">
      <!-- 請顯示第二個項目的內容 -->
      {{ notes[1].content }}
    </p>
  </div>
  <!-- 因為border-color不是純文字，有符號(-)，所以要單引號起來 -->
  <div class="note" :style="{ color: notes[2].color, 'border-color': notes[2].color}">
    <h3 class=" title">
      <!-- 請顯示第三個項目的標題 -->
      {{ notes[2].title }}
    </h3>
    <p class="content">
      <!-- 請顯示第三個項目的內容 -->
      {{ notes[2].content }}
    </p>
  </div>
</div>

CSS

* {
          padding: 0;
          margin: 0;
        }

        #app {
          display: flex;
          justify-content: space-around;
        }

        .note {
          margin: 20px 0;
          border: 1px solid #ccc;
          width: 30%;
          padding: 20px;
          box-sizing: border-box;
          text-align: center;
        }

JavaScript

const {
  createApp
} = Vue;

createApp({
  data() {
    return {
      notes: [{
          title: "春節行程安排",
          content: "吃飽睡，睡飽吃",
          color: "red"
        },
        {
          title: "工作待辦事項",
          content: "詢問各家廠商報價",
          color: "green"
        },
        {
          title: "運動健身計畫",
          content: "每天早上六點去健身",
          color: "blue"
        }
      ]
    };
  },
  mounted() {
    this.notes[0].content = "多出門、到處走走、也要多運動";
  }
}).mount("#app");