vue的那点事-v-bind对于样式控制的增强-操作class

20 阅读1分钟
  • 语法 :class="对象、数组"
  • 对象---键就是类名,值是布尔值。如果值为true,有这个类,否则没有这个类
  • <div class="box" :class="{类名1:布尔值,类名2:布尔值}">
  • 使用场景:一个类名,来回切换
  • 数组---数组中所有的类,都会添加到盒子上,本质就是一个class列表
  • <div class="box" :class="[类名1,类名2,类名3]">
  • 使用场景:批量添加或删除类
  • 示例 tab切换

image.png

核心思路

image.png