vue中動態類名的寫法

<!-- 內聯樣式，跟一般css添加樣式相似， 多了一個綁定，樣式添加通過數組方式，數組中以字符串顯示 -->
<div id="box" :class="['one','two']">{{mg}}</div>

<!--數組中添加三元表達式，只有為true時候才起作用  --> 
    <!-- 下邊這種在變換樣式的時候采用 需要另外在data中說明flag的值 -->
<div id="box1" :class="['one','two',flag? 'three':'']">{{mg}} 這種方法不好讀</div>
     <!-- 三元表達式看着麻煩，使用對象形式好一些 -->
<div id="box12" :class="['one','two',{three:flag}]">{{mg}}</div> 
<!-- 然后有了下面這兩種形式 -->
 <div id="box2" :class = "[{one:true},{ two:true},{ 'three' :true}]">{{mg}} </div>
<!--
使用對象添加樣式的時候，對象的屬性是類名，對象的屬性名可以帶引號也可以不帶引號，屬性的值是標識符,但是如果對象中的 鍵 含有- 則必須給該鍵添加""
--> 
 <div id="box3" :class = "{one:true, two:true, three :true}">{{mg}} </div>   
 <div id="box4" :class = mm>{{mg}}</div>






<div id="box5" :style='{color:"red","font-size":"50px"}'>{{mg}}</div>
<!-- 同樣的有了下邊的寫法 -->
<div id="box6" :style='style1'>{{mg}} 一個</div> 
<div id="box7" :style='[style1,style2]'>{{mg}}多個的時候要通過數組的方式</div> 

.current {
            color: red !important;
            font-weight: bold !important;
        }
        .origin {
            color: blue;
            font-weight: normal;
        }
 


    <div id="app" v-cloak>
        <ul v-for='(item,index) in arr'>
            <li @click='handlerLi(index)' :class='{current:flag==index,origin}'>{{item.id}}------{{item.name}}</li>
        </ul>
    </div>

1.數組的形式添加樣式

.<div :class='["thin","title"]'>ddddddddd</div>

2.數組中使用三元表達式

.<div :class='["thin","title",isactive?"active":""]'>ddddddddd</div>

data中定義isactive:true,

3.數組中使用對象

active是類名字

.<div :class='["thin","title",{'active':isactive}]'>ddddddddd</div>

4.直接使用對象

前面是類名為true 使用

<h1 :class=“{red:true,italic:true}”></h1>

通過屬性綁定的形式，將樣式對象應用到元素中

<h1 :style=“{color:"red",“font-weight”:200}”>這是一個H1</h1>

<h1 :style=“h1styleobj”>這是一個H1</h1>

 data:{

   h1styleob:{color:"red",“font-weight”:200}

}

可以是2個對象

<h1 :style=“[styleobj1,styleobj2]”>這是一個H1</h1>

data:{

   h1styleob:{color:"red",“font-weight”:200},

h1styleob:{color:"red",“font-weight”:200},

}

 

轉：https://blog.csdn.net/qq_41170620/article/details/91357869