vue v-for 点击的时候，图片进行旋转

Question

被点击的那一条 的箭头 旋转。。 要怎么做？

Answer 1

css做旋转动画
新建一个data 比如叫 rotate:false
然后用三目运算绑定class，v-bind:class=[rotate=true？'class a'：'class b']
然后点击让rotate发生改变
这样应该可以实现的

<style scoped>

    .aa{

        transition: all 2s;

    }

    .go{

        transform:rotate(-180deg);

        transition: all 2s;

    }

</style>

<template>

<div>

    <i :class="[rotate?'fa fa-arrow-down go':'fa fa-arrow-down aa']" @click="start"></i> //class随rotate的true或者false改变 我这为图方便用了项目里的图标测试，图片也是一样的~

</div>

</template>

<script>

export default {

  data () {

    return {

        rotate:false

    }

  },

  methods: {

      start(){

          this.rotate=!this.rotate;

          console.log(this.rotate)

      }

  }

}

</script>