上下箭头来回切换并且变色

最新推荐文章于 2024-01-08 17:40:44 发布

iiiilooaixuud

最新推荐文章于 2024-01-08 17:40:44 发布

阅读量297

点赞数

分类专栏：页面遇到的基础问题 vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_46617584/article/details/126994722

版权

页面遇到的基础问题同时被 2 个专栏收录

101 篇文章 3 订阅

订阅专栏

vue

91 篇文章 1 订阅

订阅专栏

效果：

代码：

let sortIcons=ref([
      {
        id:1,
        text:"更新时间",
        upState:true,
        downState:false
      },
      {
        id:2,
        text:"价格",
        upState:true,
        downState:false
      }
    ])

          <div class="sortBox" v-for="(item, index) in sortIcons" :key="item.id">
            <p @click="changeStatus(index)">{{item.text}}</p>
            <div class="iconBox">
              <el-icon style="height: 10px"   :id='item.upState?"activeColor":""'
                ><CaretTop style="width: 15px; height: 10px; top: 4px"
              /></el-icon>
              <el-icon style="height: 10px"  :id='item.downState?"activeColor":""'
                ><CaretBottom style="width: 15px; height: 10px"
              /></el-icon>
            </div>

上次写过一次，但是写的太罗嗦，这次很简单方便