filter+include实现 动态按钮 切换 动态按钮

需求

5个模式按钮，8个控制按钮，通过点击模式按钮来显示不同的控制按钮。

难点

因为这些按钮都是通过动态渲染出来的，所以不好控制显示，一开始想的是通过type传参，然后用switch选择，判断这个模式显示什么按钮，再去修改渲染控制按钮的数组，从而实现控制按钮的变化。

解决思路

1.模式按钮数组modelList：在每个模式按钮中定义一个参数type，用来分辨选择的模式；

2.控制按钮数组handleList：显示所有按钮，然后在每个控制按钮中定义一个type，存储这个按钮在哪些模式中显示；（一开始的控制type定义成了一个数组，发现数组并不好处理，就直接改成了字符串型）

3.渲染控制按钮数组selectList：最后定义一个页面渲染控制按钮的数组，用来更新页面；

处理好数据以后，在切换事件中只需要判断控制type有没有包含传来的模式type，把包含的放在渲染数组中，就能实现功能了。

切换

this.selectList = this.handleList.filter(*v* => v.type.includes(type))

实现效果