03-Vue_样式设置

在Vue中使用样式

使用class样式

.red{
    color: red;
}
.thin{
    font-weight:200;
}
.italic{
    font-style: italic;
}
.active{
    letter-spacing: 0.5em;
    word-spacing: 0.5em;
}

1. 数组数组方式

class 需要使用 v-bind 做数据绑定

<h1 :class="['red', 'thin']">{{msg}}</h1>

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

<h1 :class="['red', 'thin', isactive?'active':'']">{{msg}}</h1>

3. 数组中嵌套对象

<h1 :class="['red', 'thin', {'active': isactive}]">{{msg}}</h1>

4. 直接使用对象

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

Vue 实例对象

const vm = new Vue({
    el: "#app",
    data: {
        msg: '这是一个大标题！',
        isactive: false,
        classObj: {red:true, italic:true, active:false, thin:true},
    },
});

使用内联样式style

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

<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>

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

• 在data上定义样式：

const vm = new Vue({
    el: "#app",
    data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
    },
});

• 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="h1StyleObj">这是一个善良的H1</h1>

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

• 在data上定义样式：

const vm = new Vue({
    el: "#app",
    data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
    },
});

• 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>