vue如何動態(tài)增加css的方法是:1、在元素中綁定動態(tài)樣式,語法“<div class="名稱" :class="css樣式名">”;2、在data中定義數(shù)據(jù)對象;3、在css中寫樣式。
本教程操作環(huán)境:windows7系統(tǒng)、vue2.9.6版、Dell G3電腦。
第一步:在元素中綁定動態(tài)樣式
1.添加單個樣式
<div class="addInvTitle" :class="lightBlue">
2.添加多個樣式
<div id="addInvite" class="addInvite" :class="[addInviteHeight1, addInviteHeight2]">
第二步:data中定義數(shù)據(jù)對象
data: { addInviteHeight1: '', // 彈框的高度 addInviteHeight2: '', // 彈框的高度 lightBlue: 'lightBlue', // lightBlue是css中定義的樣式名 }
第三步:在css中寫樣式
.addInviteHeight1 { height: 52.5rem; } .addInviteHeight1 { height: 48rem; } .lightBlue { background-color: #6e9dd3; }
【推薦學(xué)習(xí):javascript高級教程】