css写小箭头

最新推荐文章于 2024-08-01 13:41:00 发布

原创最新推荐文章于 2024-08-01 13:41:00 发布 · 238 阅读

0 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在Vue中使用动态绑定class实现列表项的展开与折叠效果，通过点击事件切换元素显示状态，并利用$set方法确保视图更新。

1.动态绑定class，根据ifshow的状态改变箭头的class

<p :class="[ifshow ?'up' :'down']"></p>

p
    width:.2rem;
    height:.2rem;
    border:solid;
    border-width:0 .01rem .01rem 0;
.down
    transform:rotate(-45deg);
.up
    transform:rotate(45deg);

2.在click方法中切换就欧克

3.在列表中具体使用的时候

 <ul v-for="(item,index) in riskData"
    :key="index"
     @click="showWarnData(index)">
       <li class="stateTitle">
          <p>今日
             <strong>{{item.CN_Time}}</strong>
             <span>{{item.stateMsg}}</span>
          </p>
          <p :class="[item.ifshow ?'up' :'down']"></p>
       </li>
       <transition name="slide-fade">
          <v-warnData :item="item" v-show="item.ifshow"></v-warnData>
       </transition>
 </ul>

data：

data(){
    return{
         riskData: [], //后台接收的
         ifshow: true,
    }
}

click方法

    showWarnData (index) {
      this.riskData[index].ifshow = !this.riskData[index].ifshow
      this.$set(this.riskData, index, this.riskData[index])
    }

this.$set方法可以解决：“在实例创建之后添加新的属性到实例上，它不会触发视图更新”的问题