2024-10-07 課後作業-JavaScript 系列七:第4課 ── 學習 Vue 迴圈的寫法 發表於 2024-10-03 更新於 2024-10-08 分類於 OneDayOneNote 閱讀次數: 課後作業-JavaScript 系列七:第4課 ── 學習 Vue 迴圈的寫法 課後作業-JavaScript 系列七:第4課 ── 學習 Vue 迴圈的寫法 04_js_vue_vFor.html12345678910111213141516171819202122232425262728293031<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript 系列七:第4課 ── 學習 Vue 迴圈的寫法</title> <link rel="stylesheet" href="./04_js_vue_vFor.css"></head><body> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app"> <div class="wrap"> <div v-for="note in notes" class="note" :class="note.color"> <h3 class="title"> {{note.title}} </h3> <p class="content"> {{note.content}} </p> </div> </div> </div> <script src="./04_js_vue_vFor.js"></script></body></html> 04_js_vue_vFor.js12345678910111213141516171819202122232425262728const { createApp } = Vue createApp({ data() { return { notes: [ { title: "春節行程安排", content: "吃飽睡,睡飽吃", color: "red", }, { title: "工作待辦事項", content: "詢問各家廠商報價", color: "green", }, { title: "運動健身計畫", content: "每天早上六點去健身", color: "blue", }, ] } }, mounted() { this.notes[0].content= "多出門、到處走走、也要多運動k" }, }).mount('#app') 04_js_vue_vFor.css1234567891011121314151617181920212223242526272829303132*{ padding: 0; margin: 0; list-style: none; box-sizing: border-box;}.wrap{ display: flex; align-content: center;}.note{ width: 240px; height: 100px; border: 1px solid #ccc; border-radius: 5px; margin:10px ; padding: 15px;}.red{ background-color: #f7d5d9;}.green{ background-color: #D0EDDA;}.blue{ background-color: #C9E4FD;}