vue实现点击箭头的旋转动画（收起展开）效果

实现方法：用vue动态绑定class的方法，实现用不同的class渲染箭头，达到点击箭头的旋转效果

模板的内容：

<img :class="{ 'arrowTransform': !flag, 'arrowTransformReturn': flag}" src="arrow.png" alt="" @click="flag = !flag">

data的定义：

data(){
	return {
		flag : false,
	}
}

style的内容：

  .arrowTransform{
    transition: 0.2s;
    transform-origin: center;
    transform: rotateZ(180deg);
  }
  .arrowTransformReturn{
    transition: 0.2s;
    transform-origin: center;
    transform: rotateZ(0deg);
  }

有其他更简单的做法欢迎留言评论哦 谢谢~