当前位置：首页 > VUE

vue实现样式切换

2026-01-18 08:33:27VUE

Vue 样式切换实现方法

动态 class 绑定

通过 v-bind:class 或简写 :class 实现动态样式切换，适用于需要根据条件切换多个 class 的场景：

<template>
  <div :class="{ active: isActive, 'text-danger': hasError }"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    }
  }
}
</script>

当 isActive 为 true 时会添加 active class，hasError 为 true 时添加 text-danger class。

数组语法

适用于需要同时应用多个 class 的情况：

<div :class="[activeClass, errorClass]"></div>

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

对象语法

可以在数组语法中使用对象语法：

vue实现样式切换

<div :class="[{ active: isActive }, errorClass]"></div>

计算属性

对于复杂的 class 逻辑，推荐使用计算属性：

computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

动态 style 绑定

使用 :style 绑定内联样式：

vue实现样式切换

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

样式模块化

在单文件组件中使用 <style module> 实现 CSS 模块化：

<template>
  <div :class="$style.red">Red Text</div>
</template>

<style module>
.red {
  color: red;
}
</style>

切换方法

通过方法控制样式切换：

<button @click="toggleClass">Toggle Class</button>
<div :class="{ active: isActive }"></div>

methods: {
  toggleClass() {
    this.isActive = !this.isActive
  }
}

第三方库集成

使用 classnames 等工具库简化 class 管理：

import classNames from 'classnames'

computed: {
  btnClass() {
    return classNames('btn', {
      'btn-primary': this.isPrimary,
      'btn-large': this.size === 'large'
    })
  }
}

每种方法适用于不同场景，动态 class 绑定适合简单条件切换，计算属性适合复杂逻辑，样式模块化适合组件化开发，根据具体需求选择合适的方式。