从零搭建网站（第四天）

现在已经可以按后台数据返回在前端进行遍历了，下一步做一下在左边进行筛选，来决定筛选的商品列表。这个当然可以自己来想清楚逻辑，然后拼凑代码，但我选择参考一下之前学习的两个项目：vue.js实战中的商城项目以及硅谷外卖，看高手的代码就像是跟高手交流一样可以学到别人的思路和精华。来看一下别人的筛选思路。

梁灏老师的商城思路，举品牌为例，使用map函数获取后台中的所有品牌（无重复）数组，然后在点击每个品牌时，针对性修改数组列表（使用filter函数），根据存在这个数组列表中的数据遍历，由于vue数组的响应特性，会自动修改页面。

尚硅谷的项目里没有针对商品的筛选操作，里面各种分类如“折扣”，“香浓甜粥”等都是写好的数据。
相比之下我们还是选择第一种思路，反正筛选条件也不是很多。我们当然可以照本宣科使用第一种思路和代码稍作修改，而且用自定义的元素进行选择页面也会好看些（html原生的输入框、按钮的样式都比较丑），但要成为优秀的软件工程师，要有自己的思路，我就用我自己的网站结构（使用多选框），每当有性别、价格、衣物类别中的选项被选择时，就使用!判断符将不符合该条件的商品剔除，当然，不能使用原生dom操作了，用vue的attr属性之类的，而且vue里的多选框用法与原生稍有不同，得使用v-model,且v-model绑定一个值和绑定几个值的表现形式又有所不同，对我这种老逼看一眼api就会了，新手还得把这些用法多练一练才会。为了模拟老板的各种奇葩需求，我还按照<200,>200<1000,>1000这三种价格在前端进行判断，这活完全可以在后端弄。还有一个要注意的事，刚开始多选框默认是都没用选中的，我们可以根据需要来默认选中它以展示数据。使用v-model以后，再使用input元素的checked属性就会失效了，估计是因为vue内部把原生的行为改写了，这时我们要设置默认多选框中默认选中的项目只需要改变如input框中v-model元素的数组值即可。
顺手改几个图片地址，不然整体看起来怪怪的。最终结果如下：