溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

幾種動態(tài)設(shè)置樣式的方法

發(fā)布時間：2020-05-31 22:41:38 來源：網(wǎng)絡(luò) 閱讀：482 作者：wx5a5f8671bdd15 欄目：web開發(fā) 
樣式類綁定：

<div class="demo" @click="sttachRed = !attachRed" :class="{red:attachRed}"></div>

使用對象：
<div class="demo" @click="sttachRed = !attachRed" :class="divClasses"></div>
computed:{ 
    divClasses:function(){
            return {
                    red:this.attachRed,
                    blue:!this.attachRed
            }
        }
}

使用命名：
css中定義.red，.green，.blue樣式。
<div class="demo"  :class="[color,{red:attachRed}]"> </div>

data:{
        attachRed:false,
        color:'greed'
        }

        動態(tài)設(shè)置樣式，不使用CSS類：
        <div class="demo" :style="{backgroundColor:color}></div>
        data:{color:'gray'}    或
        <div class="demo" :></div>
        computed:{
            mystyle:function(){
                return {
                    backgroundColor:this.color,
                    width:this.width + 'px'
                }
            }
        }

        數(shù)組語法設(shè)置元素樣式
        <div class="demo" :></div>
向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手