如何使用v-bind:class根据多个布尔值为元素绑定多个类

你遇到的核心问题是不能在单个元素上使用多个v-bind:class指令，同时你尝试的合并写法存在语法错误。下面提供两种正确的实现方式：

方法1：数组语法（推荐，适合多组条件类） #

把两个条件判断放在同一个数组中，Vue会自动处理条件不满足的情况（不需要写'none'，不满足时对应的数组项会被忽略）：

<div
  v-bind:class="[
    task.checked ? '!bg-gray-800 text-gray-600 line-through' : '',
    task.selected ? '!bg-gray-100' : ''
  ]"
  class="tasks_container grid grid-cols-10"
  v-for="task in tasks"
>
  <!-- task content -->
</div>

甚至可以简化写法，省略三元表达式的else分支（当条件不满足时，表达式结果为undefined，Vue会自动跳过）：

<div
  v-bind:class="[
    task.checked && '!bg-gray-800 text-gray-600 line-through',
    task.selected && '!bg-gray-100'
  ]"
  class="tasks_container grid grid-cols-10"
  v-for="task in tasks"
>
  <!-- task content -->
</div>

方法2：对象语法（适合更清晰的键值对映射） #

如果想让逻辑更直观，可以用对象语法，键是CSS类名，值是对应的布尔条件：

<div
  v-bind:class="{
    '!bg-gray-800 text-gray-600 line-through': task.checked,
    '!bg-gray-100': task.selected
  }"
  class="tasks_container grid grid-cols-10"
  v-for="task in tasks"
>
  <!-- task content -->
</div>

补充说明 #

• 你之前尝试的[...], [...]写法错误，Vue要求v-bind:class的数组值必须是单个数组，不能用逗号分隔两个数组。
• 原生class属性中的类（比如tasks_container grid grid-cols-10）会和v-bind:class绑定的类合并，不用担心冲突。

内容的提问来源于stack exchange，提问作者Slinkyartist