首页 > 其他分享 >VUE3 script setup里面如何动态更新整个页面的背景图片

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

时间:2024-11-11 18:20:19浏览次数:5  
标签:const script url setup background VUE3 backgroundImageUrl ref image

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>

 

 

 

标签:const,script,url,setup,background,VUE3,backgroundImageUrl,ref,image
From: https://www.cnblogs.com/air/p/18540294

相关文章

  • vue3 provide的值 在回调函数中改变,inject 如何获取到最新的值?
    需求:父组件,通过provide传递了视频方向的响应式值,该值会有一个初始化的默认值,并在获取视频方向的回调函数中,来动态改变子组件,需要获取到父组件传递的视频方向,来执行一些逻辑。这里我们在子组件中通过父组件传递响应式的变量,子组件接受后,通过watch监听该变量的改变,来动态执......
  • Udemy Vue3 Course
    v-bindv-htmlv-on,简写@有时候会用到$event,使得修改input输入框内的值,同时改变显示的内容。双向绑定·v-model:![](https://img2024.cnblogs.com/blog/1876332/202411/1876332-20241108143044905-1750838567.png)一个顶俩,一个v-model顶v-bind:value+v-on:input`。动态......
  • VUE3实现好看的通用网站源码模板
    文章目录1.设计来源1.1网站主界面1.2登录界面1.3注册界面1.4图文列表模板界面1.5简洁列表模板界面1.6文章内容左右侧模板界面1.7文章内容模板界面2.效果和源码2.1动态效果2.2源代码2.3目录结构源码下载万套模板,程序开发,在线开发,在线沟通作者:xcLeigh文章......
  • 【热门主题】000040 探索 ECMAScript:从起源到未来
    前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦......
  • JavaScript基础总结
             JavaScript(简称JS)是一个广泛使用的客户端脚本语言,常用于网页开发中。它可以在浏览器中运行,执行交互操作和动态效果。以下是JavaScript基础的所有核心知识点,按主题分类列出。1.基本语法声明变量使用var、let和const来声明变量:varname='Alice';/......
  • JavaScript题目一 根据成绩给出学生考评
            根据学生的成绩给出考评,可以通过if或switch语句来实现。下面是一个简单的JavaScript代码示例,根据学生的成绩返回不同的评语。示例代码:functionevaluateStudent(score){letevaluation;if(score>=90){evaluation='优秀';}else......
  • JavaScript题目二 实现猜数字游戏
    实现一个猜数字游戏的过程,通常包括以下几个步骤:生成一个随机数:计算机随机生成一个目标数字。用户输入猜测:玩家猜测数字并提交。比较用户输入与目标数字:计算机检查玩家的猜测,给出提示(比如“猜小了”或“猜大了”)。循环进行:直到玩家猜对为止,或者达到预设的次数。1.HTML文件(......
  • JavaScript题目三 制作简易计算器
    目标:提供四个基本的运算功能:加、减、乘、除。支持数字输入和运算符输入。显示结果。1.HTML文件(index.html)<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,i......
  • TypeScript入门基础
    参考网址-https://blog.csdn.net/guoxulieying/article/details/133771340基础类型-布尔值 -letisDone:boolean=false; -数字-TypeScript里的所有数字都是浮点数,这些浮点数的类型是number。除了支持十进制,还支持二进制、八进制、十六进制-以下......
  • vue3+element plus +js 实现树形和末级展开是表格
    1、实现一个树形和末级展开是表格,需要支持大数据量,因此使用VirtualizedTable虚拟化表格 el-table-v22、效果图 3、代码<template><el-table-v2:header-height="0"v-model:expanded-row-keys="expandedRowKeys":columns="columns"......