javascript_series7_vue_reactivity

by aelgy369

HTML

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>


<div class="container">
  <div id="app" class="row column-gap-3">
    <div class="note col border border-2" :style="{ 'background-color': notes[0].color}">
      <h3 class="title">
        {{ notes[0].title }}
      </h3>
      <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
      <label class="form-check-label content" for="firstCheckbox">{{ notes[0].content }}</label>
    </div>
    <div class="note col border border-2" :style="{ color: notes[1].color}">
      <h3 class="title">
        {{ notes[1].title }}
      </h3>
      <input class="form-check-input me-1" type="checkbox" value="" id="SecondCheckbox">
      <label class="form-check-label content" for="firstCheckbox">{{ notes[1].content }}</label>
    </div>
    <div class="note col border border-2" :style="{ color: notes[2].color}">
      <h3 class="title">
        {{ notes[2].title }}
      </h3>
      <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
      <label class="form-check-label content" for="firstCheckbox">{{ notes[2].content }}</label>
    </div>
  </div>
</div>

JavaScript

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

  createApp(data).mount('#app')