vant/vue——tab栏切换上下箭头功能实现

.active {
  color: red;
}
.black{
  color: black;
}

<ul>
    <li
          v-for="(item, index) in screen.lis"
          @click="lisBtn(index)"
          :class="{ active: screen.currentindex === index }"
          :key="index"
        >
          <span class="span-top-down"
            >{{ item.name }}
            <van-icon
              name="arrow-up"
              class="top"
              :class="{black:item.status === 1 ? 'black' : ''}"
            />
            <van-icon
              name="arrow-down"
              :class="item.status === 2 ? 'black' : ''"
              class="down"
            />
          </span>
        </li>
</ul>

data{
    return{
       screen: {
        currentindex: 0,
        lis: [
          {
            name: "综合",
            status: 1,
          },
          {
            name: "销量",
            status: 0,
          },
          {
            name: "价格",
            status: 0,
          },
          {
            name: "筛选",
            status: 0,
          },
        ],
      },
    }    
}

lisBtn(index) {
      var oldIndex = this.screen.currentindex;
      var oldItem = this.screen.lis[oldIndex];
      if (index == oldIndex) {
        oldItem.status = oldItem.status === 1 ? 2 : 1;
      } else {
        var newItem = this.screen.lis[index];
        oldItem.status = 0;
        newItem.status = 1;
        this.screen.currentindex = index;
        //  console.log(newItem);
      }
    },