编程马·菜鸟教程

Appearance

样式绑定 ​

样式绑定是Vue3中的一个重要特性，它允许你动态地绑定CSS类和内联样式到元素上。本章节将详细介绍Vue3中样式绑定的使用方法和最佳实践。

绑定 CSS 类 ​

1. 绑定单个类 ​

你可以使用 v-bind:class 或简写 :class 来绑定CSS类：

vue
<template>
  <div :class="isActive ? 'active' : ''">Active</div>
</template>

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

const isActive = ref(true)
</script>

<style>
.active {
  color: red;
  font-weight: bold;
}
</style>

2. 绑定多个类 ​

你可以使用对象语法来绑定多个类：

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

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

const isActive = ref(true)
const isError = ref(false)
</script>

<style>
.active {
  color: red;
  font-weight: bold;
}

.text-danger {
  background-color: pink;
}
</style>

3. 绑定数组类 ​

你可以使用数组语法来绑定多个类：

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

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

const activeClass = ref('active')
const errorClass = ref('text-danger')
</script>

<style>
.active {
  color: red;
  font-weight: bold;
}

.text-danger {
  background-color: pink;
}
</style>

4. 混合使用对象和数组语法 ​

你可以混合使用对象和数组语法：

vue
<template>
  <div :class="[activeClass, { 'text-danger': isError }]">Text</div>
</template>

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

const activeClass = ref('active')
const isError = ref(false)
</script>

<style>
.active {
  color: red;
  font-weight: bold;
}

.text-danger {
  background-color: pink;
}
</style>

5. 绑定计算属性 ​

你可以使用计算属性来动态计算类名：

vue
<template>
  <div :class="classObject">Text</div>
</template>

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

const isActive = ref(true)
const isError = ref(false)

const classObject = computed(() => {
  return {
    active: isActive.value,
    'text-danger': isError.value
  }
})
</script>

<style>
.active {
  color: red;
  font-weight: bold;
}

.text-danger {
  background-color: pink;
}
</style>

绑定内联样式 ​

1. 绑定单个样式 ​

你可以使用 v-bind:style 或简写 :style 来绑定内联样式：

vue
<template>
  <div :style="{ color: textColor, fontSize: '16px' }">Text</div>
</template>

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

const textColor = ref('red')
</script>

2. 绑定对象样式 ​

你可以将样式对象定义在数据中：

vue
<template>
  <div :style="styleObject">Text</div>
</template>

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

const styleObject = ref({
  color: 'red',
  fontSize: '16px',
  fontWeight: 'bold'
})
</script>

3. 绑定数组样式 ​

你可以使用数组语法来绑定多个样式对象：

vue
<template>
  <div :style="[baseStyles, overridingStyles]">Text</div>
</template>

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

const baseStyles = ref({
  color: 'red',
  fontSize: '16px'
})

const overridingStyles = ref({
  fontWeight: 'bold',
  backgroundColor: 'yellow'
})
</script>

4. 绑定计算属性 ​

你可以使用计算属性来动态计算样式：

vue
<template>
  <div :style="computedStyles">Text</div>
</template>

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

const isActive = ref(true)

const computedStyles = computed(() => {
  return {
    color: isActive.value ? 'red' : 'blue',
    fontSize: '16px',
    fontWeight: isActive.value ? 'bold' : 'normal'
  }
})
</script>

样式绑定的最佳实践 ​

1. 优先使用 CSS 类 ​

对于复杂的样式，应该优先使用CSS类而不是内联样式：

vue
<!-- 好的做法 -->
<template>
  <div :class="{ active: isActive }">Text</div>
</template>

<style>
.active {
  color: red;
  font-weight: bold;
  background-color: yellow;
  padding: 10px;
  border-radius: 4px;
}
</style>

<!-- 不好的做法 -->
<template>
  <div :style="{
    color: isActive ? 'red' : 'black',
    fontWeight: isActive ? 'bold' : 'normal',
    backgroundColor: isActive ? 'yellow' : 'white',
    padding: '10px',
    borderRadius: '4px'
  }">Text</div>
</template>

2. 使用计算属性 ​

对于复杂的样式逻辑，应该使用计算属性：

vue
<template>
  <div :class="classObject">Text</div>
</template>

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

const isActive = ref(true)
const isError = ref(false)
const isLoading = ref(false)

const classObject = computed(() => {
  return {
    active: isActive.value,
    'text-danger': isError.value,
    'text-muted': isLoading.value
  }
})
</script>

3. 避免在模板中使用复杂表达式 ​

模板中的表达式应该简单明了，复杂逻辑应该放在计算属性中：

vue
<!-- 好的做法 -->
<template>
  <div :class="classObject">Text</div>
</template>

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

const user = ref({
  role: 'admin',
  isActive: true
})

const classObject = computed(() => {
  return {
    'admin': user.value.role === 'admin',
    'active': user.value.isActive
  }
})
</script>

<!-- 不好的做法 -->
<template>
  <div :class="{
    'admin': user.role === 'admin',
    'active': user.isActive
  }">Text</div>
</template>

4. 使用 CSS 变量 ​

对于需要动态变化的样式值，可以使用CSS变量：

vue
<template>
  <div class="box" :style="{ '--primary-color': primaryColor }"></div>
</template>

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

const primaryColor = ref('red')
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: var(--primary-color);
  transition: background-color 0.3s ease;
}
</style>

5. 合理使用样式绑定 ​

样式绑定应该用于动态变化的样式，对于静态样式，应该直接在CSS中定义：

vue
<!-- 好的做法 -->
<template>
  <div class="box" :class="{ active: isActive }"></div>
</template>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: gray;
}

.active {
  background-color: red;
}
</style>

<!-- 不好的做法 -->
<template>
  <div :style="{
    width: '100px',
    height: '100px',
    backgroundColor: isActive ? 'red' : 'gray'
  }"></div>
</template>

样式绑定的使用场景 ​

1. 状态管理 ​

vue
<template>
  <div class="button" :class="{ active: isActive, disabled: isDisabled }">
    Button
  </div>
</template>

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

const isActive = ref(false)
const isDisabled = ref(false)
</script>

<style>
.button {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.button.active {
  background-color: blue;
  color: white;
}

.button.disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>

2. 主题切换 ​

vue
<template>
  <div class="app" :class="{ 'dark-theme': isDarkTheme }">
    <h1>App</h1>
    <button @click="toggleTheme">Toggle Theme</button>
  </div>
</template>

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

const isDarkTheme = ref(false)

const toggleTheme = () => {
  isDarkTheme.value = !isDarkTheme.value
}
</script>

<style>
.app {
  background-color: white;
  color: black;
  padding: 20px;
  transition: all 0.3s ease;
}

.app.dark-theme {
  background-color: #333;
  color: white;
}
</style>

3. 响应式设计 ​

vue
<template>
  <div class="container" :class="{ 'mobile': isMobile }">
    <h1>Container</h1>
  </div>
</template>

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

const isMobile = ref(window.innerWidth < 768)

const handleResize = () => {
  isMobile.value = window.innerWidth < 768
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style>
.container {
  width: 1200px;
  margin: 0 auto;
}

.container.mobile {
  width: 100%;
  padding: 0 20px;
}
</style>

总结 ​

样式绑定是Vue3中的一个重要特性，它允许你动态地绑定CSS类和内联样式到元素上。通过样式绑定，你可以实现状态管理、主题切换、响应式设计等功能。

在使用样式绑定时，你应该优先使用CSS类，使用计算属性处理复杂逻辑，避免在模板中使用复杂表达式，使用CSS变量处理动态样式值，以及合理使用样式绑定。

在后续的章节中，我们将学习Vue3的组件化开发，包括组件的定义、注册、使用，以及组件通信等内容。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建