Vue.js如何实现多个带条件的class类绑定？

问题原因 #

同一个元素上不能声明多个:class指令，浏览器会自动忽略重复的属性，因此你的原有写法无法生效。Vue本身完全支持多条件class绑定，只要把规则合并到同一个:class声明中即可。

实现方案 #

方案1：数组语法（最常用，适配所有场景） #

数组形式的:class支持同时传入对象规则、三元表达式、固定类名字符串，写法如下：

<div 
  class="container" 
  :class="[
    { qwerty: !open },
    lower ? 'left' : 'right'
  ]"
>

数组内的每一项规则都会独立判断生效，不需要修改原有逻辑，直接把多个:class的内容放到数组里即可。

方案2：对象语法 #

如果所有条件都是「符合条件就加类名」的规则，也可以统一放到单个对象里：

<div 
  class="container" 
  :class="{
    qwerty: !open,
    left: lower,
    right: !lower
  }"
>

方案3：计算属性（逻辑复杂时推荐） #

如果class的判断逻辑较多，建议把逻辑抽到计算属性中，模板更简洁易维护：

// Vue3 示例，Vue2 写法同理
const containerClass = computed(() => {
  return [
    { qwerty: !open },
    lower ? 'left' : 'right'
  ]
})

模板直接绑定计算属性即可：

<div class="container" :class="containerClass">

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