Vue.js如何根据多条件动态切换div的background-image

核心思路是先建立天气状态和背景图的映射关系，避免写大量冗余的if/else判断，后续新增天气类型只需要更新映射表即可。

原生JavaScript实现方案 #

首先定义状态映射表：

// 可自行扩展更多天气状态对应的背景图
const weatherBgMap = {
  rainy: 'rain.jpg',
  snow: 'snow.jpg',
  sunny: 'sunny.jpg',
  cloudy: 'cloudy.jpg',
  foggy: 'foggy.jpg'
}

拿到API返回值后直接匹配映射表设置背景：

// weatherStatus为接口返回的天气状态字段
const targetBg = weatherBgMap[weatherStatus] || 'default.jpg' // 无匹配状态时用默认背景
const bgContainer = document.querySelector('#weather-container') // 替换为你的div选择器
bgContainer.style.backgroundImage = `url(${targetBg})`
// 补充通用背景样式避免显示异常
bgContainer.style.backgroundSize = 'cover'
bgContainer.style.backgroundPosition = 'center'
bgContainer.style.backgroundRepeat = 'no-repeat'

Vue 2/3 实现方案 #

直接用动态style绑定即可：

<template>
  <div 
    class="weather-container"
    :style="{ backgroundImage: `url(${weatherBgMap[weatherStatus] || 'default.jpg'})` }"
  >
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      weatherStatus: '', // 接口返回的天气状态存在该字段
      weatherBgMap: {
        rainy: 'rain.jpg',
        snow: 'snow.jpg',
        sunny: 'sunny.jpg',
        // 自行扩展其他状态
      }
    }
  },
  // 接口请求逻辑自行补充，拿到返回值后赋值给weatherStatus即可
}
</script>

<style scoped>
.weather-container {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 自行设置容器宽高 */
  width: 100vw;
  height: 100vh;
}
</style>

React 实现方案 #

import { useState, useEffect } from 'react'

// 映射表可单独抽为常量文件维护
const weatherBgMap = {
  rainy: 'rain.jpg',
  snow: 'snow.jpg',
  sunny: 'sunny.jpg',
  // 自行扩展其他状态
}

function WeatherApp() {
  const [weatherStatus, setWeatherStatus] = useState('')

  // 模拟接口请求
  useEffect(() => {
    fetchWeatherApi().then(res => {
      setWeatherStatus(res.data.status)
    })
  }, [])

  const bgUrl = weatherBgMap[weatherStatus] || 'default.jpg'

  return (
    <div 
      className="weather-container"
      style={{ backgroundImage: `url(${bgUrl})` }}
    >
      {/* 页面内容 */}
    </div>
  )
}

/* 对应css样式
.weather-container {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
}
*/

常见踩坑点 #

• 图片路径错误：本地静态资源的相对路径根目录是html文件位置，不是js文件位置，路径错误会触发404
• 状态值不匹配：接口返回的状态可能存在大小写、特殊字符、空格等问题，打印返回值确认和映射表的key完全一致
• 容器无宽高：div没有内容且未设置高度的情况下，高度为0会导致背景图无法显示

内容的提问来源于stack exchange，提问作者w3bprinz