[筆記] Vue 按鈕 / 篩選資料架構

Posted onAuthorANDY LIEN

章節連結

這是一篇在 Vue 上實作按鈕 / 篩選器的資料架構筆記。
vue.js logo vue

說明

按鈕設計方式

  1. 將一個個的篩選器 / 按鈕以物件的方式儲存，並存放到一個陣列中
  2. 用 computed 來儲存判斷所需的條件
  3. 用 watch 作即時的判斷處理。

篩選器設計方式

  1. 原始資料在 data 建立，並同時建立一個 filteredData 供渲染用
  2. 在 created() 階段，將 data 的原始資料寫入 filteredData
  3. computed 計算 criteria，並用 watch 監聽
  4. 若監聽到有需要變化，呼叫在 methods 中的方法

Demo

按鈕互動實作

篩選器互動實作

其他 Vue.js 相關文章

  • [指南] Vue.js 搭配 Docker 進行佈署
  • [筆記] Vue-Carousel 輕量化輪撥套件介紹
  • [筆記] 在 Vue 中正確引用 src/assets 裡的圖片
  • [筆記] 將 Vue 專案自動佈署到 Github Pages 上
  • [筆記] Vue 如何監控視窗寬度，並讓每個 component 可以取用
  • [指南] 在 Vue 專案中，修改 樣式方法
  • [筆記] 從 Vue CLI 3 開始建立規模化專案
  • [筆記] 運用 Moment.js 製作 AM / PM 時間外掛
  • [筆記] CodeSandbox 線上編輯器 模擬前端框架
  • [筆記] 工字型樣板，長方形依照比例縮放
  • [筆記] Element-UI 的自定義表格邊框樣式
  • [筆記] Vue 關於 slot-scope 的簡易認知
  • [筆記] Vue Watch 監聽並延後發送請求
  • [筆記] Element UI Table 表格表頭縱向顯示
  • [筆記] Vue SCSS 使用 Deep Selectors
  • [筆記] Vue 使用 SCSS
  • [筆記] 自定義 Element UI 標題欄位遇上 Vue/no-unused error 的解決方法
  • [筆記] Vue 生命週期
  • [筆記] Vue 單元測試初探
  • [筆記] Vue2 Perfect-Scrollbar 置底開始
  • [筆記] Vue 的狀態管理 Vuex 實作心得
  • [筆記] Vue 自訂綁定 style 標籤
  • [筆記] Body-Parser 無法解析的 FormData 解決方案 – multer
  • [筆記] Vue 頁面元件定時自動跳轉
  • [筆記] Vue 刷新當前頁面
  • [全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt
  • [筆記] BootstrapVue Pagination Vue 分頁套件使用
  • [筆記] Vue 避免 ESLint 的 Unexpected Console Statement
  • [筆記] Vue-cli 輸出 console.log 的結果
  • [筆記] Vue.js 前端分頁、搜尋表格內容 – 運用 props, data, computed, methods, watch
  • [筆記] 解決 Vue-cli 打包後，無法顯示 Favicon 的問題
  • [筆記] 全端開發本機端資料互通 Vue.config.js 設定
  • [筆記] 解決 Vue 專案的 localhost:8080/sockjs-node 的無效請求
  • [筆記] Vue.js & Node.js 專案初始化筆記
    • 按讚加入粉絲團

    延伸閱讀