在Vue2中使用@click旋转图像

分享于2022年07月17日 css javascript vue.js vuejs2 问答
【问题标题】:在Vue2中使用@click旋转图像(Rotate image with @click in Vue2)
【发布时间】:2022-03-14 21:41:15
【问题描述】:

我在仪表板上有一个刷新按钮。我想让它旋转 360 度。 如何在刷新按钮上 每次点击 旋转图像?

这是我试过的代码,只能点击两次:

var vm = new Vue({
  el: '#app',
  data: {
    clicked: false,
  },
  methods: {
    rotation() {
      this.clicked = !this.clicked
    }
  }
})
.clicked {
  transform: rotate(360deg);
  transition: transform 0.5s ease-in-out;
}

refresh-icon-btn

  • clicked true/false ,不是电话的名称,对吧?
  • 对,它指的是 boolean

【解决方案1】:

这可能是其中一种方法,具有可在 0 度和 360 度之间切换的内联样式,并具有用于转换的常量类。

var vm = new Vue({
  el: '#app',
  data: {
    deg: 0,
  },
  methods: {
    rotation() {
      this.deg += 360;
    }
  }
})
.transition {
  transition: transform 0.5s ease-in-out;
}

refresh-icon-btn

  • 可以保持相同的旋转方向吗?
  • @PennyLiu - 是的,我们可以,请检查更新。
  • 谢谢。这真是太棒了。只需对您的代码稍作调整。 :style="{ 变换: `rotate(${deg}deg)` }"
  • @PennyLiu - 我同意。最好在适用时使用字符串文字。我已经对答案进行了更改。我很高兴它有帮助!