【Vue2.xx】绑定class和样式

Vue中的绑定

1．class样式

写法：class=“xxx” xxx可以是字符串、对象、数组。

1. 字符串写法适用于：类名不确定，要动态获取。

2. 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

3. 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2．style样式

1. :style="{fontSize：xxx}"其中xxx是动态值。

注意:font-size要用驼峰命名法

2. :style="[a,b]"其中a、b是样式对象。

3.代码案例

Html

 <div id="app">
    <!--绑定class样式--字符串写法,适用于:样式类名不确定,需要动态指定-->
    <div id="box" :class="mood" @click="changeMood">绑定class样式</div></br></br>

    <!--绑定class样式--数组写法