单个视图的Vue背景色

<template>
  <div style="background-color: #f1f1f1;">
    <!-- 组件内容 -->
  </div>
</template>

<template>
  <div :class="backgroundColor">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      backgroundColor: 'bg-gray' // 定义背景色的类名
    }
  }
}
</script>

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

<script>
export default {
  computed: {
    computedBackgroundColor() {
      // 根据条件动态计算背景色
      if (someCondition) {
        return '#f1f1f1';
      } else {
        return '#ffffff';
      }
    }
  }
}
</script>