vue 中实现动态切换背景图

1. 场景

点击单选按钮动态切换背景图片

2. 代码

2.1 html 部分

<div :style="bgStyle"> </div>
<a-radio-group v-model="form.sign" @change="radioChange"><a-radio-button value="0"> <icon-font type="icon-cucaodu" /> </a-radio-button><a-radio-button value="1"> <icon-font type="icon-iconbeifen3" /> </a-radio-button><a-radio-button value="2"> <icon-font type="icon-duihao_o" /> </a-radio-button>
</a-radio-group>

2.2 js 部分

export default {data(){return {coverImgUrl:require('../../assets/logo.png'),// 背景图片的地址}},methods：{// 点击单选按钮，动态设置背景图片的地址radioChange(e){let num = parseInt(e.target.value)switch(num){case 0 :this.coverImgUrl = require('../../assets/logo.png')break;case 1 :this.coverImgUrl = require('../../assets/小图片.jpg')break;default:this.coverImgUrl = require('../../assets/小图片2.png')break;}}},computed:{bgStyle(){return {backgroundImage: 'url(' + this.coverImgUrl + ')'}}}
}

vue 中实现动态切换背景图相关推荐

Vue动态切换背景图
最近在改写一个网站,抽离公共组件的时候,发现一个nav组件图标是用background-image显示的.把基本的框架抽离出去,具体菜单项用插槽,然后图片需要用props传参.写了一个小案例. 父组件 ...
在vue中鼠标移入切换背景图片移出时再次切换图片
在Vue中,当鼠标移入元素时,可以通过绑定@mouseover事件来触发相应的方法,该方法可以通过修改数据来改变元素的背景图片.同样地,当鼠标移出元素时,可以绑定@mouseout事件触发另一个方法, ...
vue动态更改背景图
文章目录前言一.要怎么做? 二.使用步骤 1.在data中写入数据 2.添加背景图到div处总结前言例如:项目中我们需要动态改变背景图. 一.要怎么做? 示例:1.首先我们要拿到数据中背景图 ...
vue动态添加背景图
VUE中在for循环中给每一项设置动态style背景图 VUE项目中时常会有需求,对一个数组进行循环渲染,并对其中的每一项给不同的背景图片. 首先考虑用到动态style,根据循环中的index变化改变 ...
vue3利用JS切换背景图
VUE3利用JS切换背景图实践记录需要实现的功能:鼠标移入移除图标切换(在这只做移入展示) 新建一个读取图片的函数,如下 // 动态读取图片 function getImageUrl(name: s ...
vue给html动态添加属性,Vue中怎么动态添加类名？
能够向组件添加动态类名是非常强大的功能.它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体. 添加动态类名与在组件中添加 prop :class=" ...
在vue中使用antV-G2展示折线图
介绍 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 ...
如何实现一个动态的背景图？
写一个有趣的前端博客前端开发是一个充满挑战和乐趣的领域,每天都有新的技术和工具出现,让我们的网页变得更加美观和功能强大.在这个博客中,我想和大家分享一些我在前端开发中遇到的有趣的问题和解决方案,希望 ...
当鼠标移入时切换背景图时闪烁的问题
当页面第一次加载完成时,鼠标移入时需要切换的背景图还未被加载过,本地没有这张图片,所以切换的时候回出现闪烁的情况,我们可以在一个地方先把这张图放下,但是不让它显示出来,这样当我们第一次加载完页面时需要 ...

vue 中实现动态切换背景图

1. 场景

2. 代码

2.1 html 部分

2.2 js 部分

vue 中实现动态切换背景图相关推荐

最新文章

热门文章