如何在vue js中改变css背景？

<template>
  <div :style="{ backgroundColor: bgColor }">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      bgColor: 'red' // 初始背景颜色
    }
  },
  // 在需要改变背景的地方调用方法
  methods: {
    changeBackground() {
      this.bgColor = 'blue'; // 改变背景颜色为蓝色
    }
  }
}
</script>

<template>
  <div :class="bgClass">
    <!-- 内容 -->
  </div>
</template>

<style>
.red-bg {
  background-color: red;
}

.blue-bg {
  background-color: blue;
}
</style>

<script>
export default {
  data() {
    return {
      bgClass: 'red-bg' // 初始背景类名
    }
  },
  // 在需要改变背景的地方调用方法
  methods: {
    changeBackground() {
      this.bgClass = 'blue-bg'; // 改变背景类名为blue-bg
    }
  }
}
</script>

<template>
  <div :style="backgroundStyle">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  computed: {
    backgroundStyle() {
      return {
        backgroundColor: this.bgColor // 根据需要的背景颜色动态生成样式对象
      }
    }
  },
  data() {
    return {
      bgColor: 'red' // 初始背景颜色
    }
  },
  // 在需要改变背景的地方调用方法
  methods: {
    changeBackground() {
      this.bgColor = 'blue'; // 改变背景颜色为蓝色
    }
  }
}
</script>