vue中箭头展开收起效果

vue中箭头展开收起效果

 <i :class="{ 'arrowRight': !flag, 'arrowDown': flag}" class="el-icon-arrow-right" style="margin-left:5px" @click="flag = !flag"></i>

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

<style>
.arrowRight{
  cursor: pointer;
  transition: 0.2s;
  transform-origin: center;
  transform: rotateZ(0deg);
}
.arrowDown{
  cursor: pointer;
  transition: 0.2s;
  transform-origin: center;
  transform: rotateZ(90deg);
}
</style>