題目
請使用Vue 3創建一個簡單的計數器應用，要求實現以下功能：
1.
頁面顯示一個數字（初始值為0）
2.
提供兩個按鈕：「+」和「-」
3.
點擊「+」按鈕時數字加1
4.
點擊「-」按鈕時數字減1
5.
當數字為負數時，文字顏色變為紅色
6.
當數字為正數時，文字顏色變為綠色
7.
當數字為0時，文字顏色為默認黑色
——————————————
題解
HTML部分

JavaScript部分 const { createApp } = Vue

createApp({
data() {
return {
count: 0
}
},
computed: {
numberColor() {
if (this.count > 0) {
return 'green'
} else if (this.count < 0) {
return 'red'
} else {
return 'black'
}
}
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
}).mount('#app')
CSS部分（可選美化）

知識點解析
1.
數據綁定（data）: count 是響應式數據，當它改變時，視圖會自動更新
2.
事件處理（@click）: 使用@click指令綁定點擊事件到方法
3.
計算屬性（computed）: numberColor根據count的值動態計算顏色
4.
條件樣式綁定（:style）: 使用:style動態綁定樣式
5.
插值表達式（{{ }}）: 在模板中顯示數據
6.
方法（methods）: 定義可以在模板中調用的函數
擴展思考
如何添加重置按鈕將計數器歸零？
如何限制計數器的最大值和最小值？
如何保存計數器的狀態到本地存儲？
明天我們將學習Vue的條件渲染和列表渲染！