Vue利用ref属性更改css样式的操作方法

<template>
  <div>
    <button @click="changeColor">Change Color</button>
    <div ref="colorBox" :style="{ width: '100px', height: '100px' }"></div>
  </div>
</template>

<script>
export default {
  methods: {
    changeColor() {
      this.$refs.colorBox.style.backgroundColor = 'red'; // 修改背景色
    }
  }
}
</script>

<template>
  <div>
    <button @click="toggleVisibility">Toggle Visibility</button>
    <div v-if="isVisible" ref="visibilityBox" :style="{ width: '100px', height: '100px', backgroundColor: 'blue' }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
      if (this.$refs.visibilityBox) {
        this.$refs.visibilityBox.style.display = this.isVisible ? 'block' : 'none';
      }
    }
  }
}
</script>

<template>
  <div>
    <div ref="responsiveBox" :style="{ width: '100%', height: '100px', backgroundColor: 'green' }"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener('resize', this.handleResize);
    this.handleResize(); // 初始化时调用一次
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      const width = window.innerWidth;
      if (width < 600) {
        this.$refs.responsiveBox.style.height = '50px';
      } else {
        this.$refs.responsiveBox.style.height = '100px';
      }
    }
  }
}
</script>

<template>
  <div>
    <button @click="startAnimation">Start Animation</button>
    <div ref="animationBox" :style="{ width: '100px', height: '100px', backgroundColor: 'orange' }"></div>
  </div>
</template>

<script>
export default {
  methods: {
    startAnimation() {
      const box = this.$refs.animationBox;
      let position = 0;

      const intervalId = setInterval(() => {
        if (position >= 200) {
          clearInterval(intervalId);
        } else {
          position += 10;
          box.style.transform = `translateX(${position}px)`;
        }
      }, 50);
    }
  }
}
</script>

<template>
  <div>
    <button @click="animateWithGSAP">Animate with GSAP</button>
    <div ref="gsapBox" :style="{ width: '100px', height: '100px', backgroundColor: 'purple' }"></div>
  </div>
</template>

<script>
import { gsap } from 'gsap';

export default {
  methods: {
    animateWithGSAP() {
      const box = this.$refs.gsapBox;
      gsap.to(box, { duration: 2, x: 200, rotation: 360 });
    }
  }
}
</script>