004-读书笔记-Vue官网 Class与Style的绑定

1.绑定Class

绑定Class，使用 v-bind:class，简写的形式是 :class。绑定Class比较灵活，可以使用表达式、字符串、对象或数组。

1-1 搭建结构

首先，新建一些 class 样式：

  .colorRed {
    color: red;
  }

  .font28px {
    font-size: 28px;
  }

其次，搭建一些HTML结构：

<template>
  <div id="app">
    <div>这是一个div标签</div>
  </div>
</template>

最后，定义一个属性，用来保存类名：

<script>
  export default {
    name: 'app',
    data() {
      return {
        clsColor: 'colorRed'
      }
    }
  }

</script>

1-2 绑定表达式

绑定表达式的时候，可以直接绑定 Vue 实例中的属性：

<div :class="clsColor">这是一个div标签</div>

当然也可以绑定一个三目运算符：

<div :class="false ? clsColor : 'font28px'">这是一个div标签</div>
<!-- clsColor 是Vue实例的一个属性 -->
<!-- 'font28px' 是一个字符串 -->

上面代码中，使用了一个字符串，可以正常运行，说明可以使用字符串来绑定Class。

1-3 绑定字符串

绑定字符串的时候只能绑定一个 Class，不能绑定多个。

<div :class="'font28px'">这是一个div标签</div>

如果非要绑定多个字符串，那么就会报错：

<div :class="'font28px' 'colorRed'">这是一个div标签</div>

[HMR] bundle has 1 errors

1-4 绑定数组

既然使用字符串不能绑定多个 Class，那么就可以使用数组来绑定多个 Class。

<div :class="['font28px', 'colorRed']">这是一个div标签</div>

在数组中也可以存在表达式：

<div :class="['font28px', clsColor]">这是一个div标签</div>

数组的元素也可以是对象：

<div :class="['colorRed', { font28px:clsColor }]">这是一个div标签</div>

需要说明的是，{ font28px:clsColor } 中 font28px 是 'font28px' 的简写形式，也是一个字符串；clsColor 是 Vue 实例的属性，会被转成一个布尔类型的值，如果该值为 true，则显示 'font28px' 类，否则不显示。

1-5 绑定对象

绑定对象的写法如下：

<div :class="{ font28px: clsColor }">这是一个div标签</div>

让我们来理解一下这句代码：

{ font28px: clsColor }     这句代码可以写成下面的形式
{ 'font28px': clsColor }   这个时候将clsColor转成布尔值
{ 'font28px': true }       由于是true，因此显示类'font28px'
这个时候显示的就是类'font28px'的样式

绑定对象的时候，由于对象可以存在多个属性，因此，可以实现多个Class的绑定。

1-6 总结

1. 绑定单个Class使用：

   • 表达式
   • 字符串

2. 绑定多个Class使用

   • 数组
   • 对象

2.绑定Style

绑定Style和绑定Class类似，因此，使用和绑定Class相同的目录结构，方便查看。

2-1 搭建结构

首先，搭建HTML结构：

<template>
  <div id="app">
    <div :style="styleColor">这是一个div标签</div>
  </div>
</template>

其次，定义一个属性，用来设置字体的颜色：

<script>
  export default {
    name: 'app',
    data() {
      return {
        styleColor: 'color:red'
      }
    }
  }

</script>

2-2 绑定表达式

<div :style="styleColor">这是一个div标签</div>

2-3 绑定字符串

<div :style="'font-size:28px'">这是一个div标签</div>

2-4 绑定数组

绑定数组是特别需要注意的，因为数组中的元素必须是样式对象，如果不是对象，无法正常解析样式：

<div :style="[{'color':'red'}, {'font-size':'28px'}]">这是一个div标签</div>

2-5 绑定对象

在绑定内联样式的时候，对象是经常使用的一种形式：

<div :style="{'color':'red', 'font-size':'28px'}">这是一个div标签</div>

2-6 在内联样式中绑定背景图

这个应该是比较常见的一种需求了，特别写出了，做一下笔记：

<div :style="{'background-image':'url('+图片地址+')'}"></div>

3.参考内容

• Class 与 Style 绑定