Make a list of items with name and price

by yoyosan

HTML

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<h1>
v-for 的應用
</h1>

<div id="app">
  <div class="note" v-for = "(note, index) in notes" :style = "{color:note.color}">
    <h3 class="title">
      {{ note.title }}
    </h3>
    <p class="content">
      {{ note.content }}
    </p>
  </div>

</div>

CSS

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

JavaScript

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

}).mount('#app')