vue点击旋转,再点击复原
效果:
![](https://img2020.cnblogs.com/blog/1909089/202008/1909089-20200806113615144-258608145.gif)
1.html。通过绑定t值控制不同的class名, 原图是右边方向的箭头
<img class="right" v-if="item.t" src="@/assets/images/list-down.png" alt=""> <img class="right" src="@/assets/images/list-right.png" v-else :class="{rote:!item.t}" alt="">
2.style。
.right
height 22px
width 20px
transform rotateZ(90deg)
transition all ease 0.5s
.rote
transform rotateZ(0deg)