Vue每日一題 創(chuàng)建一個簡單的計數(shù)器組件
題目描述:
使用Vue 3的Composition API創(chuàng)建一個計數(shù)器組件,要求:
1.
顯示當(dāng)前計數(shù)值(初始值為0)
2.
提供"增加"和"減少"按鈕
3.
當(dāng)計數(shù)為負(fù)數(shù)時,顯示紅色文字
4.
當(dāng)計數(shù)為正數(shù)時,顯示綠色文字
5.
當(dāng)計數(shù)為0時,顯示默認(rèn)顏色
?? 題解
方法一:使用
方法二:使用傳統(tǒng)的Options API 當(dāng)前計數(shù):{{ count }}
計數(shù)器
?? 知識點總結(jié)
1.
Composition API vs Options API:
Composition API 使用 ref() 創(chuàng)建響應(yīng)式數(shù)據(jù)
Options API 使用 data() 函數(shù)返回響應(yīng)式數(shù)據(jù)
2.
計算屬性:
用于根據(jù)響應(yīng)式數(shù)據(jù)動態(tài)計算值
具有緩存特性,只有依賴項改變時才重新計算
3.
事件處理:
使用 @click 綁定點擊事件
方法中直接修改響應(yīng)式數(shù)據(jù)
4.
條件樣式:
使用 :class 動態(tài)綁定CSS類
結(jié)合計算屬性實現(xiàn)條件渲染
?? 擴展練習(xí)
1.
添加一個"重置"按鈕,將計數(shù)器歸零
2.
添加步長設(shè)置,可以設(shè)置每次增減的數(shù)值
3.
添加最大值和最小值限制
4.
使用動畫效果讓數(shù)字變化更平滑
明天我們將學(xué)習(xí)Vue的組件通信! ??

浙公網(wǎng)安備 33010602011771號