Vue2教程 - 6 Vue中使用样式

在 HelloWorld 中有讲到，在 Vue 组件中通过 <style scoped> 标签来定义样式，这些样式只对当前的组件生效。

在 Vue 中，还可以使用 class 样式和内联样式。

6.1 class 样式

首先定义样式：

<style scoped>
.red {
  color: red;
}

.italic {
  font-style: italic;
}

.active {
  letter-spacing: 0.5em;
}
</style>

除了可以使用原始的普通的方式设置 class 样式。

在vue中有4种使用样式的方式，使用 v-bind:class 完成：

<!-- 结构 -->
<template>
  <div id="root">
    <!-- 0. 普通方式的设置class样式 -->
    <h1 class="red italic">逗比笔记</h1>

    <!-- 
        1. 使用数组传递样式class名称，注意：这里的class需要使用v-bind做数据绑定。
        这种方式较普通方式没有更加方便，没有什么优点。
    -->
    <h1 :class="['red', 'italic']">逗比笔记</h1>

    <!-- 2. 在数组中使用三元表达式 -->
    <h1 :class="['red', 'italic', flag ? 'active' : '']">逗比笔记</h1>

    <!-- 3. 在数组中使用对象来代替三元表达式，提高代码的可读性，如果flag为true，则active生效 -->
    <h1 :class="['red', 'italic', { 'active': flag }]">逗比笔记</h1>

    <!-- 
        4. 直接使用对象，在为class使用v-bind绑定对象的时候，对象的属性是类名，
          由于对象的属性可带引号，也可不带引号，所以这里我没写引号，属性的值是一个标识符 
     -->
    <h1 :class="{ red: true, italic: false, active: false }">逗比笔记</h1>

    <!-- :class可以直接使用对象，那么对象也可以在vue对象中定义 -->
    <h1 :class="classObj">逗比笔记</h1>
  </div>
</template>

<!-- 脚本 -->
<script>
export default {
  name: 'App',
  data() {
    return {  // 上面使用样式使用的flag和classObj需要在Vue中进行定义：
      flag: true,
      classObj: { red: true, italic: false, active: false }
    }
  }
}
</script>

<style scoped>
.red {
  color: red;
}

.italic {
  font-style: italic;
}

.active {
  letter-spacing: 0.5em;
}
</style>

6.2 style内联样式

除了可以使用原始的 style 设置的方式，Vue 中还可以有三种使用 style 的方式。

举个栗子：

<!-- 结构 -->
<template>
  <div id="root">
    <!-- 0. 使用原始的设置方式 -->
    <h1 style="color:red; font-size:40px">逗比笔记</h1>

    <!-- 1. 直接在元素上通过:style的形式，书写样式对象，如果key包含-，则key必须是字符串形式 -->
    <h1 :style="{color: 'red', 'font-size': '40px'}">逗比笔记</h1>

    <!-- 2. 将样式对象，定义到Vue对象的data中，并直接引用到:style中 -->
    <h1 :style="styleObj1">逗比笔记</h1>

    <!-- 3. 在:style中通过数组，引用多个Vue中的data上的样式对象 -->
    <h1 :style="[styleObj1, styleObj2]">逗比笔记</h1>
  </div>
</template>

<!-- 脚本 -->
<script>
export default {
  name: 'App',
  data() {
    return {  // 上面使用的styleObj1和styleObj2需要定义
      styleObj1: { color: 'red', 'font-weight': 200 },
      styleObj2: { 'font-style': 'italic' }
    }
  }
}
</script>

上面使用的 styleObj1 和 styleObj2 需要再 Vue 对象中的 data 中进行定义。