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

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐