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>