VUE3 script setup里面如何动态更新整个页面的背景图片

1. 使用内联样式和响应式数据

• 步骤一：创建响应式数据来存储背景图片的 URL
  在script setup中，可以使用ref来创建一个响应式的变量来存储背景图片的 URL。

<template><div><button @click="changeBackground">更换背景图片</button></div>
</template><script setup>
import { ref } from 'vue';
const backgroundImageUrl = ref('your_initial_image_url.jpg');const changeBackground = () => {// 这里可以是根据某种逻辑来选择新的图片 URL，比如从一个数组中选择下一个backgroundImageUrl.value = 'new_image_url.jpg';
};
</script><style scoped>
div {width: 100%;height: 100vh;background-image: url({{ backgroundImageUrl.value }});background-size: cover;background-position: center;
}
</style>

2. 使用 CSS 变量(更灵活的方式)

• • 步骤一：在script setup中定义 CSS 变量和更新函

<template><div><button @click="changeBackground">更换背景图片</button></div>
</template><script setup>
import { ref, onMounted } from 'vue';
const root = document.documentElement;
const backgroundImageUrl = ref('your_initial_image_url.jpg');const changeBackground = () => {backgroundImageUrl.value = 'new_image_url.jpg';root.style.setProperty('--background-image-url', `url(${backgroundImageUrl.value})`);
};onMounted(() => {root.style.setProperty('--background-image-url', `url(${backgroundImageUrl.value})`);
});
</script><style scoped>
div {width: 100%;height: 100vh;background-image: var(--background-image-url);background-size: cover;background-position: center;
}
</style>

3. 结合 Vue 的动态绑定类或样式(如果有多个样式变化情况)

• 步骤一：定义多个样式类和数据来控制样式切换

<template><div :class="['page', backgroundClass]"><button @click="changeBackground">更换背景图片</button></div>
</template><script setup>
import { ref } from 'vue';
const backgroundClass = ref('bg-image-1');const changeBackground = () => {backgroundClass.value = 'bg-image-2';
};
</script><style scoped>
.page {width: 100%;height: 100vh;
}
.bg-image-1 {background-image: url(image1.jpg);background-size: cover;background-position: center;
}
.bg-image-2 {background-image: url(image2.jpg);background-size: cover;background-position: center;
}
</style>