css写小箭头

 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方法可以解决：“在实例创建之后添加新的属性到实例上，它不会触发视图更新”的问题