vue 选择多个选择并改变背景

Vue.js 是一种流行的JavaScript库，用于构建用户界面。它提供了一种简单的方法来处理用户与应用程序交互的各种情况，包括选择多个选项并改变背景。

在Vue中，我们可以使用v-model指令来创建一个双向绑定。我们可以创建一个checkbox组，然后使用v-model将它与一个存储选择状态的变量相关联。例如，如果我们有三个选项，我们可以创建三个checkbox，并使用v-model将它们与一个名为selectedOptions的变量相关联。

接下来，我们可以为每个选项设置一个特定的值，并在selectedOptions变量中设置一个默认值作为一个空数组。

<template>
  <div>
    <input type="checkbox"
           id="option1"
           value="option1"
           v-model="selectedOptions">
    <label for="option1">选项1</label>
    
    <input type="checkbox"
           id="option2"
           value="option2"
           v-model="selectedOptions">
    <label for="option2">选项2</label>
    
    <input type="checkbox"
           id="option3"
           value="option3"
           v-model="selectedOptions">
    <label for="option3">选项3</label>
  
    <div :style="{ background: backgroundStyle }">背景</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
    }
  },
  computed: {
    backgroundStyle() {
      return this.selectedOptions.length > 0 ? 'blue' : 'white'; // 当选中的选项大于0时，背景改为蓝色，否则为白色
    }
  }
}
</script>

在上面的代码中，我们通过设置backgroundStyle计算属性来根据selectedOptions的长度决定背景颜色。当选中的选项的长度大于0时，我们将背景设置为蓝色，否则设置为白色。

这样，当我们选择一个或多个选项时，背景颜色将根据选项的选择情况而改变。

以上是使用Vue实现选择多个选项并改变背景的基本方法。当然，根据具体的需求，我们可以通过样式绑定、事件处理等进一步扩展和自定义。