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