2024-09-17 課後作業 - JavaScript 系列七：第3課 ── 學習 Vue 條件判斷式的寫法 v-bind

發表於 更新於 分類於 閱讀次數：
課後作業 - JavaScript 系列七：第3課 ── 學習 Vue 條件判斷式的寫法 vbind

課後作業 - JavaScript 系列七：第3課 ── 學習 Vue 條件判斷式的寫法 v-bind

03_js_vue_vbind.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 系列七：第3課 ── 學習 Vue 條件判斷式的寫法</title>
    <link rel="stylesheet" href="./03_js_vue_vbind.css">
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
        <div class="wrap">
            <div class="note" :class="notes[0].color">
            
                <h3 class="title">
                  <!-- 請顯示第一個項目的標題 -->
                  {{notes[0].title}}
                </h3>
                <p class="content">
                  <!-- 請顯示第一個項目的內容 -->
                  {{notes[0].content}}
                </p>
              </div>
              <div class="note" :class="notes[1].color">
                <h3 class="title">
                  <!-- 請顯示第二個項目的標題 -->
                  {{notes[1].title}}
                </h3>
                <p class="content">
                  <!-- 請顯示第二個項目的內容 -->
                  {{notes[1].content}}
                </p>
              </div>
              <div class="note" :class="notes[2].color">
                <h3 class="title">
                  <!-- 請顯示第三個項目的標題 -->
                  {{notes[2].title}}
                </h3>
                <p class="content">
                  <!-- 請顯示第三個項目的內容 -->
                  {{notes[2].content}}
                </p>
              </div>
        </div>
    </div>

    <script src="./03_js_vue_vbind.js"></script>
</body>
</html>

03_js_vue_vbind.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const { 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')

03_js_vue_vbind.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
*{
    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;
}