1. 程式人生 > >[log] vue動態的修改樣式

[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
    },