vue v-for 點(diǎn)擊的時(shí)候，圖片進(jìn)行旋轉(zhuǎn)

css做旋轉(zhuǎn)動(dòng)畫
新建一個(gè)data 比如叫 rotate:false
然后用三目運(yùn)算綁定class，v-bind:class=[rotate=true？'class a'：'class b']
然后點(diǎn)擊讓rotate發(fā)生改變
這樣應(yīng)該可以實(shí)現(xiàn)的

<style lang="css" 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改變 我這為圖方便用了項(xiàng)目里的圖標(biāo)測(cè)試，圖片也是一樣的~
</div>

</template>
<script>
export default {
  data () {
    return {
        rotate:false
    }
  },
  methods: {
      start(){
          this.rotate=!this.rotate;
          console.log(this.rotate)
      }
  }
}
</script>

v-for 數(shù)據(jù)的話 改變當(dāng)前的 可以根據(jù)索引來取當(dāng)前目標(biāo)

.style.transform = "rotate("90 + "deg)"
改變他的style屬性
但是一般做旋轉(zhuǎn)下次進(jìn)來 還需要旋轉(zhuǎn)狀態(tài) 單前端實(shí)現(xiàn)很麻煩
你需要和后臺(tái)配合 把渲染完這個(gè)圖片的路徑傳給后臺(tái)替換之前的路徑

現(xiàn)在阿里的就很適合 而且前端就可以實(shí)現(xiàn)圖片旋轉(zhuǎn) 你可以看看
https://helpcdn.aliyun.com/do...

思路是這樣的，先寫一個(gè)旋轉(zhuǎn)180度的class類，確定一個(gè)flag判斷你的按鈕處于哪種狀態(tài)，同時(shí)利用vue的class綁定(用三元表達(dá)式判斷)，通過不同的狀態(tài)判斷綁定哪個(gè)class，詳見class的綁定