vue 中实现动态切换背景图
在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 + ')'
}
}
}
}
更多推荐
已为社区贡献5条内容
所有评论(0)