基础/ Class 绑定

绑定 HTML class

传递字符串

<template>
	<!-- 传递字符串 注意类名是 default-class，不要写成 defaultClass -->
  <button class="btn default-class">
    class 直接传字符串 对应css类名
  </button>
</template>

<style scoped>
  .btn {}
  .default-class {}
</style>

绑定响应式数据

<template>
	<!-- 绑定一个响应式数据  
 		可以同时出现 class 和 :class""
    但是只能出现一个 :class=""
	-->
  <button class="btn" :class="noBorder">
    class 直接传字符串 对应css类名
  </button>
</template>

<script setup>
  import { ref } from 'vue'
  
  // 响应式数据的值一定要和css类名保持一致，解析 noBorder 之后，按钮样式为 btn 和 border-none
  // 响应式数据变量名称可以随意定义，你甚至可以命名为 hasBorder，:class="hasBorder"，只要你自己可以看明白就行
  const noBorder = ref('border-none')
</script>

<style scoped>
  .btn {}
  .border-none { border: none }
</style>

绑定对象

<template>
	<!--
    value的类型一定是布尔类型，即使你传0也不会转换为false
    注意此时的key不能任意命名，一定要和css类名保持一致，例如 is-red，而不是写成 isRed，vue不会去解析驼峰
  -->
  <button 
    class="btn" 
    :class="{
      primary: true,
      'is-red': isRed
    }"
  >
    对象绑定 class
  </button>
</template>

<script setup>
  import { ref } from 'vue'
  
  const isRed = ref(false)
</script>

<style scoped>
  .btn {}
  .primary {}
  .is-red { color: red }
</style>

绑定其他表达式

<template>
  <button 
    class="btn" 
    :class="disabled && 'is-disabled'"
  >
    对象绑定 class
  </button>

  <!-- 或者 -->
  <button 
    class="btn" 
    :class="disabled ? 'is-disabled' : ''"
  >
    对象绑定 class
  </button>

  <!-- 或者 -->
  <button 
    class="btn" 
    :class="disabled ? { 'is-disabled': true } : ''"
  >
    对象绑定 class
  </button>

  <!-- 或者 -->
  <button 
    class="btn" 
    :class="`${disabled ? 'is-disabled' : ''}`"
  >
    对象绑定 class
  </button>
</template>

<script setup>
  import { ref } from 'vue'
  
  const disabled = ref(true)
</script>

<style scoped>
  .btn {}
  .primary {}
  .is-red { color: red }
  .is-disabled { font-size: 24px }
</style>

通过计算属性数组将上面的每种情况结合到一起

<template>
  <button :class="computedClass">
    对象绑定 class
  </button>
</template>

<script setup>
  import { ref, computed } from 'vue'

  const noBorder = ref('border-none')
  const isRed = ref(false)
  const disabled = ref(true)
  const disabledClass = ref('is-disabled')
  
  const computedClass = computed(() => [
    'btn',
    noBorder.value,
    {
      primary: true,
      'is-red': isRed.value,
    },
    disabled && disabledClass.value
  ])
</script>

<style scoped>
  .btn {}
  .primary {}
  .is-red { color: red }
  .is-disabled { font-size: 24px }
  .border-none { border: none }
</style>

万变不离其宗，你只需要保证解析之后赋值给 class 的值是字符串、key是类名value是布尔值的对象、由字符串和对象组成的数组。