一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情

平台售卖属性的操作

上一节我们做好了面包屑处理分类、面包屑处理关键字、面包屑处理品牌信息，这次我们完成面包屑处理平台售卖属性的操作。 步骤如下，由于平台售卖属性在search组件的子组件中，因此涉及到了子给父传数据的问题。首先给子组件的平台售卖属性绑定点击事件，当用户点击了平台售卖属性，将子组件中的数据通过自定义事件传递给父组件，父组件接收数据并渲染到页面中，同时设定好删除面包屑的操作。具体代码如下所示

排序操作

在这里完善项目排序相关的操作，首先查看目前的项目可以发现，有两种排序方法，分别为综合和排序，我们要实现的功能为，根据用户的点击不同，排序方式不同。通过查阅文档，可以发现共有四种排序方式，分别为综合升序、综合降序、价格升序、价格降序。分别对应的order为1：asc、1：desc、2：asc、2：desc。用户一打开界面肯定会有一个默认排序，因此我们先修改data中的order，使其默认为1：desc。

样式处理

接下来处理排序模块的样式问题，根据实际网站可以得知当用户选择不同的排序处理时，对应的排序处理模块应该有个特殊样式，让用户一目了然。因此在这里我们需要根据数据中的order来确定是哪一个排序模块需要添加特殊样式。具体代码如下所示。可以发现这么写代码过长，为了简化，可以利用计算属性来优化代码。

排序箭头

接下来处理升序降序箭头的问题，通过已经上线的项目可以发现，排序模块中是否含有箭头是根据该排序模块是否被选中，因此可以将箭头是否展示做一个v-if或者v-show的判断，判断条件可以依据这个排序模块是否已经有特殊样式。具体代码如下所示。

接下来选择自己喜欢的箭头图标替换自己书写的箭头文字 在public文件夹下的index.html文件内引入在线链接如下图所示。 查看自己选择的文件的链接与名字

页面效果如下所示

箭头的升降取决于order数据是asc还是desc因此还需做个判断来决定展示哪个箭头

代码过长利用计算属性优化下代码。

绑定点击事件

页面效果布置完成，现在开始给排序绑定点击事件。如下所示。 此时功能实现完成。