vue升序降序按钮功能实现-526互联

需求：默认升序，悬浮按钮变色，点击按钮下标跟随变化。

html

        <div class="right"
          @click="change(item,index)"
          v-for="(item, index) in btnList"
          :key="index">{{item.lable}}
          <div class="box-icon">
            <div class="up"
              :class="item.status === 1 ? 'opacity-5' : ''"></div>
            <div class="down"
              :class="item.status === 1 ? 'opacity-1' : ''"></div>
          </div>
        </div>

js

data(){
 return{
      btnList: [
        { lable: "更新时间", status: 0 },
        { lable: "访问量", status: 0 },
        { lable: "申请量", status: 0 },
      ],
    }
},
methods:{
    change(item, index) {
      this.btnList[index].status === 0
        ? (this.btnList[index].status = 1)
        : (this.btnList[index].status = 0);
    }
}

css

    .right {
      padding: 0 20px;
      height: 32px;
      color: #505363;
      font-weight: 400;
      font-size: 14px;
      margin-left: 10px;
      border: 1px solid rgb(233, 231, 231);
      display: flex;
      justify-content: center;
      line-height: 32px;
      cursor: pointer;
    }
    .right:hover {
      color: #217aff;
      border: 1px solid #217aff;
      .up {
        border-bottom: 6px solid #217aff;
      }
      .down {
        border-top: 6px solid #217aff;
      }
    }
    .opacity-5 {
      opacity: 0.5;
    }
    .opacity-1 {
      opacity: 1 !important;
    }
    .box-icon {
      height: 30px;
      margin-top: 7px;
      .up {
        width: 0px; /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
        height: 0px;
        border-bottom: 6px solid #a3a5b3;
        border-left: 4px solid transparent; /*transparent 表示透明*/
        border-right: 4px solid transparent;
        margin-bottom: 4px;
      }
      .down {
        width: 0px;
        height: 0px;
        opacity: 0.5;
        border-top: 6px solid #a3a5b3;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
      }
    }
    .box-icon div {
      height: 10px;
      margin-left: 4px;
    }