07-04-v-for

by ZooeyLai

HTML

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
  <div 
    v-for="note of notes" 
    class="note" 
    :style="{ 'background-color': note.color }"
    :key="note.id">
    <h3 class="title">{{note.title}}</h3>
    <p class="content">{{note.content}}</p>
  </div>
</div>

CSS

*,
*::after,
*::before {
 padding: 0px;
 margin: 0px;
 box-sizing: border-box;
 line-height: 1.5;
 font-size: 1rem;
}
#app{
  margin: 1rem;
}
.note{
  padding: 1rem;
  border: 1px solid #D8DAE0;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  color: #fff;
}

.content{
  font-size: 14px;
  opacity: 0.75;
}

JavaScript

const { createApp } = Vue

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