Vue3-06-样式绑定-class绑定的写法总结

class绑定的概述

class 是 html 标签元素的一个属性，因此可以通过 属性绑定的语法进行动态的绑定。
属性绑定的语法 ： v-bind:class="xxxx" 
属性绑定的语法糖 ： :class="xxxxx"

动态绑定的class 可以与静态的 class 共存。

class 绑定的常用写法

比较常见的情况有如下三种：
1、html模板中直接写对象的方式；
2、直接绑定一个对象的方式（也可以是通过计算属性返回的对象）；
3、绑定数组的方式；

总的开发思路是：
1.style 中定义一下用到的class样式；
2.script 逻辑代码中定义控制展示的表达式（也可以在html中直接写简单的逻辑判断）；
3.html 代码中进行绑定。
无论那种方式，那必须都得有以上的三个步骤。

案例介绍 ：
  1、有一个div
  2、这个div有一个基本样式属性 【basediv】 ，宽200px，高200px，有个黑色的边框；
  3、定义一个控制字体的样式属性 ：【fontclass】
  4、定义一个控制背景颜色的样式属性 ÿ