樣式類綁定：
<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'
}
動態設置樣式，不使用CSS類：
<div class="demo" :style="{backgroundColor:color}></div>
data:{color:'gray'} 或
<div class="demo" :style="mystyle"></div>
computed:{
mystyle:function(){
return {
backgroundColor:this.color,
width:this.width + 'px'
}
}
}
數組語法設置元素樣式
<div class="demo" :style="[mystyle,{ height:width+'px' }]"></div>
幾種動態設置樣式的方法
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章