章節連結
這是一篇在 Vue 上實作按鈕 / 篩選器的資料架構筆記。
說明
按鈕設計方式
- 將一個個的篩選器 / 按鈕以物件的方式儲存,並存放到一個陣列中
- 用 computed 來儲存判斷所需的條件
- 用 watch 作即時的判斷處理。
篩選器設計方式
- 原始資料在 data 建立,並同時建立一個 filteredData 供渲染用
- 在 created() 階段,將 data 的原始資料寫入 filteredData
- computed 計算 criteria,並用 watch 監聽
- 若監聽到有需要變化,呼叫在 methods 中的方法
Demo
按鈕互動實作
篩選器互動實作
其他 Vue.js 相關文章
延伸閱讀
- [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (39)
- [筆記] 六角學院 Node.js 2022 直播班記錄 – 11 Mongoose 實作運用
- [筆記] Ultimate AWS Certified Developer Associate (27)
- [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (38)
- [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (37)