Vue 中样式的使用

class样式

1.数组

    <h1 :class="['red','thin']">class样式</h1>

2.数组中使用三元表达式

    <h1 :class="['red','thin',flag?'active':'']">class样式</h1>

3.数组中嵌套对象

    <h1 :class="['red','thin',{'active':flag}]">class样式</h1>

4.直接使用对象

    <h1 :class="{red: true, thin: false, italic: true, active: false }">class样式</h1>

内联样式

1.直接在元素中书写样式对象，通过 :style

    <h1 :style="{'font-weight': 'bold', color: 'red'}">内联样式</h1>

2.将样式对象定义到data中，并直接引用到 :style

data : {
            styleObj: {'font-weight': 'bold', color: 'red'}
        }

<h1 :style="styleObj">内联样式</h1>

3.在 :style 通过数组，引用多个 data上的样式对象

 data : {
            styleObj1: {'font-weight': 'bold', color: 'red'},
            styleObj2: {'font-style': 'italic' }
        }

<h1 :style="[styleObj1, styleObj2]">内联样式</h1>