vue 图片旋转

<template>
  <div>
    <img :style="imageStyle" src="path/to/your/image.jpg" alt="Rotated Image">
    <button @click="rotateImage">Rotate Image</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      rotation: 0, // 旋转的角度
    };
  },
  computed: {
    imageStyle() {
      return {
        transform: `rotate(${this.rotation}deg)`,
      };
    },
  },
  methods: {
    rotateImage() {
      this.rotation += 90; // 每次点击旋转90度
    },
  },
};
</script>

  

posted @ 2024-06-14 17:29  luckylou  阅读(21)  评论(0编辑  收藏  举报