vue排序栏

最新推荐文章于 2023-09-08 13:14:30 发布

修罗_

最新推荐文章于 2023-09-08 13:14:30 发布

阅读量226

点赞数

分类专栏： VUE 文章标签： vue.js javascript css

本文链接：https://blog.csdn.net/weixin_45843676/article/details/124732400

版权

这篇博客展示了如何在Vue.js应用中创建一个过滤器组件，实现综合、价格和时间排序功能。通过点击事件处理函数`defaultSort`，改变了排序样式并根据用户选择调整排序顺序。同时，文章还提供了相应的CSS样式以实现排序箭头的显示效果。

摘要由CSDN通过智能技术生成

先看效果

在这里插入图片描述

html

 <!-- 排序器 -->
    <div class="filter">
      <div class="filter-bg">
        <div>
          <div style="justify-content: flex-start;" :style="{color:sort[0].color}" @click.stop="defaultSort(0)">综合排序</div>
          <div style="justify-content: center;" :style="{color:sort[1].color}" @click.stop="defaultSort(1)">价格
            <div class="sort-arrow-div">
              <div :style="{'borderBottomColor':(sort[1].is_select&&sort[1].sequence?'red':'#C2C2C2')}"></div>
              <div :style="{'borderTopColor':(sort[1].is_select&&!sort[1].sequence?'red':'#C2C2C2')}"></div>
            </div>
          </div>
          <div style="justify-content: flex-end;" :style="{color:sort[2].color}" @click.stop="defaultSort(2)">更新时间
            <div class="sort-arrow-div">
              <div :style="{'borderBottomColor':(sort[2].is_select&&sort[2].sequence?'red':'#C2C2C2')}"></div>
              <div :style="{'borderTopColor':(sort[2].is_select&&!sort[2].sequence?'red':'#C2C2C2')}"></div>
            </div>
          </div>
        </div>
        <div><span style="width:1px;background: #EAEAEA;margin-right: 4vw;height:8vw;"></span>
        <!--这里是个搜索图标