vue 中实现动态切换背景图

最新推荐文章于 2024-07-04 15:23:33 发布

小泡泡c

最新推荐文章于 2024-07-04 15:23:33 发布

阅读量7k

点赞数 1

分类专栏： Ant Design 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45325810/article/details/122186214

版权

Ant Design 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文介绍了如何通过单选按钮（Radio）实现背景图片的动态切换。在HTML中定义了一个div元素，其样式由JavaScript计算得出。当Radio按钮被点击时，会触发`radioChange`方法，根据所选按钮的值改变背景图片的URL。JavaScript代码中，根据不同的选项，设置了不同的背景图片路径。同时，`bgStyle`计算属性用于设置div的背景图片样式。

摘要由CSDN通过智能技术生成

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 + ')'
   }
  }
 }
}