美食杰—菜谱大全

思路：

首先我们定义一个空数组，然后我们到api里把数据请求到这个空数组中，在模板中把数组遍历渲染到页面上，第一个数组里面还有一个数组（list）我们可以看做一个二级路由，然后把这个list遍历出来我们动态绑定动态的把数据储存到路由中，然后筛选部分同样是把数据渲染到页面中，筛选这个属性中的说有数据，第二层路由为属性的分类，然后我们给第二层路由添加一个点击事件，如果选中就赋值，如果没选中就默认选中第一个，然后动态绑定class点击添加颜色，最后我们为了提高用户的体验度我们可以设置一个空的数组把每一个点击过的分类项储存下来，存放到路由中，每次点击完成后不会收起来，只有刷新页面的时候才会收起。

效果图:

 

代码：

定义一个空数组然后通过后端api提供的getClassify()方法然后通过.then()方法来异步获取数据

定义一个字符串用来存放tab值

 

 把这个list遍历出来我们动态绑定动态的把数据储存到路由中

 然后筛选部分同样是把数据渲染到页面中：

 

为了提高用户的体验度我们可以设置一个空的数组把每一个点击过的分类项储存下来，存放到路由中，每次点击完成后不会收起来，只有刷新页面的时候才会收起。