在Vue中使用样式:class样式和style内联样式

在Vue中使用样式

使用class样式

1. 数组，直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定 ，
2. 注意：里面的类样式名要用单引号

<h1 :class="['blue', 'thin']">这是一个大大的GOOD,来就给你一个Great!!!</h1>

3. 数组中使用三元表达式，为true才执行

<h1 :class="['blue', 'thin', isactive?'active':'']">这是一个大大的GOOD,来就给你一个Great!!!</h1>

4. 数组中嵌套对象，在数组中使用 对象来代替三元表达式，提高代码的可读性

<h1 :class="['blue', 'thin', {'active': isactive}]">这是一个大大的GOOD,来就给你一个Great!!!</h1>

5. 直接使用对象，在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，对象的属性可带引号，也可不带引号， 这里没写引号； 属性的值 是一个标识符

<h1 :class="{blue:true, italic:true, active:true, thin:true}">这是一个大大的GOOD,来就给你一个Great!!!</h1>

在style标签中定义样式

 <style>
    .blue {
      color: blue;
    }

    .thin {
      font-weight: 200;
    }

    .italic {
      font-style: italic;
    }

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

使用内联样式

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

<h1 :style="{color: 'blue', 'font-size': '30px'}">这是一个dada的H1</h1>

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

• 在data上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '400' }
}

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

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

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

• 在data上定义样式：

data: {
        h1StyleObj: { color: 'blue', 'font-size': '30px', 'font-weight': '400' },
        h1StyleObj2: { fontStyle: 'italic' }
}

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

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