[log] vue动态的修改样式

切换背景图片

<div class="carlist" :style=imgurl></div>
imgurl:{  backgroundImage: "url(" + require("../../assets/nouse.png") + ")",},

切换图片

 <img :src=img1 />

img1:require("../../assets/smartimg/right1.png"),

动态给div加边框

场景:点击地址时加上边框,并设置为当前要使用的地址


            <div class="c1" v-for="i in addresslist" 
            :id=i.AddrSeq @click="checkAddress(i.AddrSeq)">
            </div>


  // 选择地址
            checkAddress(id) {
                if (this.lastel != null) {
                    this.lastel.style.boxShadow = null
                }
                var el = document.getElementById(id)
                this.lastel = el;
                el.style.boxShadow = ' 0 2px 12px 0 #409EFF'
                this.currentAddress = id;
            },

切换class

  <div   class="footerstyle" :class="{'test2':isChoose}" >

 </div>

<style lang="scss" scoped>
    .footerstyle {
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 5%;
        background-color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .test2 {
        background-color: #ff363d;
    }
</style>

data() {
      return {      
      	isChoose:false,
	};
}
 methods: {
  	changeSubmit() {
        this.isChoose = true
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值