目標:
- 點選checkbox後，出現刪除線效果
- 實作上方tag的過濾功能
動態綁定class屬性到一個物件上
此物件的key為class名稱,value為判斷式(true/false)
先測試completed為true的情況
判斷式根據item.completed決定是否套用completed樣式到<label>
打勾時，會先透過v-model切換completed為true
接著導致completed樣式被套用
[點選頁籤進行過濾]
- 點選某一頁籤時，會有active樣式套用
- 同時進行條件filter
原本是全部的標籤上有active class
因為vue是資料驅動畫面
先於data加上一個visibility:'all'
接著讓active樣式根據visibility的條件式來決定是否套用
:class="{active:visibility==='all'}"
上面意思是如果visibility==='all'就將active樣式套用到<li>內的<a>上
[觀念]
- 由資料驅動畫面
- class的套用可由資料的條件式來決定
- event可改變資料，進而render出不同畫面
接著要處理filter的部分=>用computed來做
點選不同tab時，會更改visibility,根據此由filteredTodos去做計算
computed屬性內的method,在使用時不用加上()就會自動呼叫
[computed property]
(brand跟product若有改變，則會重新計算)
computed的結果會cache,所以需要重複access時會比使用methods有效率
範例
沒有留言:
張貼留言