如何用Vue实现图片的逆时针和顺时针旋转？

在Vue的项目中，需要导入相关的库和组件。可以使用第三方库vue-img-rotate实现图片旋转功能。该库可以通过简单的调用实现图像旋转，不需要开发者自己编写旋转算法。

具体实现代码如下：

<template>
  <div class="image-container">
    <img ref="img" :src="image" />
  </div>
  <button @click="rotateLeft">逆时针旋转</button>
  <button @click="rotateRight">顺时针旋转</button>
</template>
 
<script>
import imgRotate from 'vue-img-rotate';
 
export default {
  data() {
    return {
      image: 'image/pic.jpg',
      angle: 0
    };
  },
  methods: {
    rotateLeft() {
      this.angle -= 90;
    },
    rotateRight() {
      this.angle += 90;
    }
  },
  computed: {
    rotationStyle() {
      return {
        transform: `rotate(${this.angle}deg)`
      }
    }
 },
  components: {
    imgRotate
  }
}
</script>

<style>
.image-container {
  width: 200px;
  height: 200px;
  overflow: hidden;
}
 
img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease-in-out;
}
</style>