当前位置：首页 > article >正文

vue3入门教程：Class和Style绑定

article 2024/12/28 4:13:25

Class绑定

Class绑定可以通过多种方式实现，包括对象语法、数组语法和计算属性。

对象语法

对象语法允许根据表达式的真值动态地切换类。例如：

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

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

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

在这个例子中，当isActive为true时，active类将被应用；当hasError为true时，text-danger类将被应用。

数组语法

数组语法允许你根据数组中的值动态地应用多个类。例如：

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

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

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

在这个例子中，activeClass和errorClass都将被应用。

计算属性

当需要根据复杂的逻辑来动态计算类时，可以使用计算属性。例如：

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

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

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

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

在这个例子中，classObject是一个计算属性，它根据isActive和hasError的值返回一个对象。这个对象中的键是类名，值是一个布尔表达式，决定了相应的类是否被应用。

Style绑定

Style绑定同样支持对象语法、数组语法和计算属性。

对象语法

对象语法允许通过对象的键值对形式来动态绑定样式。键是CSS属性名（使用驼峰命名法），值是对应的样式值。例如：

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

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

const activeColor = ref('red')
const fontSize = ref(14)
</script>

在这个例子中，文本颜色将始终是红色，字体大小将根据fontSize的值动态变化。

数组语法

数组语法允许你绑定多个样式对象，这些样式对象会合并应用到同一个元素上。例如：

<template>
  <div :style="[baseStyles, overridingStyles]">多个样式绑定</div>
</template>

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

const baseStyles = ref({ color: 'blue', fontSize: '12px' })
const overridingStyles = ref({ fontWeight: 'bold' })
</script>

在这个例子中，baseStyles和overridingStyles两个样式对象会合并应用到div元素上。如果有重复的CSS属性（如color），overridingStyles中的值会覆盖baseStyles中的值。

计算属性

当需要根据复杂的逻辑来动态计算样式时，可以使用计算属性。例如：

<template>
  <div :style="computedStyle">计算属性绑定样式</div>
</template>

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

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

const computedStyle = computed(() => {
  return {
    color: isActive.value ? 'green' : 'red',
    border: isError.value ? '2px solid red' : 'none'
  }
})
</script>