点击小按钮前面的文字实现上下箭头切换效果（前面文章提到过的）

最新推荐文章于 2024-06-01 15:46:07 发布

iiiilooaixuud

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量421

点赞数 1

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

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

版权

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

101 篇文章 3 订阅

订阅专栏

vue

91 篇文章 0 订阅

订阅专栏

不再是点击后面的箭头切换状态了，而是通过点击箭头前面的文字去实现箭头切换

代码：

          <div class="sortBox">
            <p @click="changeTime()">更新时间</p>
            <div class="iconBox">
              <el-icon style="height: 10px"   :id='timeUpState?"activeColor":""'
                ><CaretTop style="width: 15px; height: 10px; top: 4px"
              /></el-icon>
              <el-icon style="height: 10px"  :id='timeDownState?"activeColor":""'
                ><CaretBottom style="width: 15px; height: 10px"
              /></el-icon>
            </div>
          </div>
          <div class="sortBox">
            <p @click="changePrice()">价格</p>
            <div class="iconBox">
              <el-icon style="height: 10px"  :id='upState?"activeColor":""'
                ><CaretTop style="width: 15px; height: 10px; top: 4px" 
              /></el-icon>
              <el-icon style="height: 10px"   :id='downState?"activeColor":""'
                ><CaretBottom style="width: 15px; height: 10px"
              /></el-icon>
            </div>
          </div>

把方法绑定在文字上

setup() {
    let time=ref(true);
    let price=ref(true);
    let upState=ref(false);
    let downState=ref(false);
    let timeUpState=ref(false);
    let timeDownState=ref(false);
    let upclick=()=>{
      upState.value=true;
      downState.value=false;
    }
    let downclick=()=>{
      upState.value=false;
      downState.value=true;
    }
    let timeUpClick=()=>{
      timeUpState.value=true;
      timeDownState.value=false;
    }
    let timeDownClick=()=>{
      timeUpState.value=false;
      timeDownState.value=true;
      time.value==true;
    }
    let changeTime=()=>{
       if(time.value==true){
        timeUpClick();
        time.value=false;
       }
       else{
        timeDownClick()
        time.value=true
       }
    }
    let changePrice=()=>{
       if(price.value==true){
        upclick();
        price.value=false;
       }
       else{
        downclick()
        price.value=true
       }
    }
    return {
      upclick,
      downclick,
      upState,
      downState,
      timeUpState,
      timeDownState,
      timeUpClick,
      timeDownClick,
      changeTime,
      changePrice
    };
  },