[笔记] Vue 按钮 / 筛选资料架构

章节连结

这是一篇在 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 专案初始化笔记

  • 按赞加入粉丝团

    延伸阅读