vue动态切换背景图片background

html:

<div class="notice">
  <div class="notice-t"><span :class="{bg1:chose1,bg2:chose2}" @click="changeBg"></span>《平台免责声明》</div>
  <div class="notice-con">注:我们将在3个工作日内告知您申请结果,届时请注意查看哦~</div>
</div>

js:

export default {
    name: "self_auth",
    data(){
      return{
        chose1:true,
        chose2:false
      }
    },
    methods:{
     changeBg(){
        this.chose1=!this.chose1;
        this.chose2=!this.chose2
      }

    }
}

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用Vue的绑定语法 `:style` 和 `@click`,来实现点击盒子切换背景图片的效果。具体方法如下: 1. 在Vue组件的data中定义一个变量`bgIndex`,用于记录当前显示的背景图片的索引。并定义一组背景图片的数组`bgList`,用于存储不同背景图片路径。 ``` data() { return { bgIndex: 0, bgList: [ 'images/bg1.jpg', 'images/bg2.jpg', 'images/bg3.jpg' ] } } ``` 2. 在Vue组件的模板中,使用`div`元素作为盒子,并绑定`style`属性,将背景图片路径设置为当前`bgIndex`所指向的图片。同时,给`div`元素绑定`@click`事件,当点击盒子时,执行`changeBg()`方法,切换背景图片。 ``` <template> <div class="box" :style="{ backgroundImage: 'url(' + bgList[bgIndex] + ')' }" @click="changeBg"></div> </template> ``` 3. 在Vue组件的方法中,定义`changeBg()`方法,用于切换背景图片。在该方法中,将`bgIndex`加1,如果`bgIndex`的大于等于背景图片数组的长度,就将`bgIndex`重置为0,从而实现循环切换背景图片的效果。 ``` methods: { changeBg() { this.bgIndex++; if (this.bgIndex >= this.bgList.length) { this.bgIndex = 0; } } } ``` 完整的Vue组件代码如下所示: ``` <template> <div class="box" :style="{ backgroundImage: 'url(' + bgList[bgIndex] + ')' }" @click="changeBg"></div> </template> <script> export default { data() { return { bgIndex: 0, bgList: [ 'images/bg1.jpg', 'images/bg2.jpg', 'images/bg3.jpg' ] } }, methods: { changeBg() { this.bgIndex++; if (this.bgIndex >= this.bgList.length) { this.bgIndex = 0; } } } } </script> <style scoped> .box { width: 500px; height: 300px; cursor: pointer; transition: background-image 0.5s ease-in-out; } </style> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值