[log] vue动态的修改样式

切换背景图片

<div class="carlist" :style=imgurl></div>
imgurl:{  backgroundImage: "url(" + require("../../assets/nouse.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
    },

猜你喜欢

转载自blog.csdn.net/java_sparrow/article/details/83624495