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

在Vue.js中改变CSS背景可以通过以下几种方式实现：

使用内联样式：可以直接在Vue组件的模板中使用内联样式来改变背景。例如，可以通过绑定一个动态的样式对象来改变背景颜色：

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

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

使用类绑定：可以通过绑定一个动态的类名来改变背景。首先在Vue组件的样式中定义不同的类名和对应的背景样式，然后通过绑定一个动态的类名来改变背景。

<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>

使用计算属性：可以通过计算属性来动态生成背景样式。首先在Vue组件的计算属性中根据需要的背景样式动态生成一个样式对象，然后在模板中使用该计算属性。

<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>

以上是在Vue.js中改变CSS背景的几种常见方法，根据具体的需求选择适合的方式即可。