介绍

在vue的 for 循环中，经常会使用到动态添加类名或者样式的情况，实现给当前的选中的 div 添加不同的样式。

动态添加类名

提示： 所有动态添加的类名，放在表达式里都需要添加引号，进行包裹。

• 通过 对象 的形式，使用花括号进行包裹。
  使用方法：{'类名'： boolean}
  第一个参数是需要添加的类名，第二个参数是一个 boolean值。
  优点是： 可以通过逗号进行分割，即可添加多个类名
  代码如下：

实现效果如下：

• 通过 数组 的形式，使用 []进行包裹。
  使用方法：
  使用方法：[判断成立的情况 ? '类名1' ： '类名2']
  第一个参数是判断条件成立的表达式，第二个参数是表达式成立的情况下添加的类名，第三个表达式是情况不成立的情况下的类名。
  代码如下：

实现效果如下：

• 通过 方法 的形式，在方法当中返回想要的类名。
  使用方法：methods(),直接写方法名。
  提示：逻辑多的时候建议用方法来添加类名，只有一个判断的时候建议用三元。
  代码如下：

实现效果如下：

动态添加style样式

提示： 在vue中，动态添加 style 样式

• 所有的样式名必须是 驼峰写法；比如 font-size必须写成 fontSize;
• 除了绑定的值以外，属性都得用引号括起来，比如 fontSize: '12px'

1. 通过对象 的形式，
   代码如下：

效果如下：

2. 通过数组 的形式，
   代码如下：

效果如下：

3. 通过 三元判断的形式，进行添加
   代码如下：

效果如下所示：

4. 通过 方法的形式，进行返回。
代码如下：

效果如下：

总结

这里我用的是 vue3的一些写法，在vue2里，用法一样，在data里定义数据即可。