绑定 HTML class
绑定对象
给 :class (v-bind:class 的缩写) 传递一个对象来动态切换 class
active 是否存在，取决于 isActive 是否为 true。
<div :class="{ active: isActive }"></div>
// 结果为：<div class="active"></div>
<script setup lang="ts">
const isActive = true
const hasError = false
</script>
<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
// 结果为：<div class="static active"></div>
也可以绑定一个对象，效果是一样的。
<template>
<div class="static" :class="classObject">
</div>
</template>
<script setup lang="ts">
const classObject = {
active: true,
'text-danger': false
}
</script>
使用计算属性也是可以的。
<template>
<div class="static" :class="classObject">
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const classObject = computed(() => {
return {
active: isActive
}
})
</script>
绑定数组
我们可以给 :class 绑定一个数组来渲染多个 CSS。
<template>
<div :class="[activeClass, errorclass]">
// 结果为：<div class="active error"></div>
</div>
</template>
<script setup lang="ts">
const activeClass = 'active'
const errorclass = 'error'
</script>
也可以在数组中使用三元表达式进行条件渲染。
isactive 为真时 activeClass 才存在，errorclass 一直存在
<template>
<div :class="[isactive ? activeClass : '', errorclass]">
<!-- 结果为：<div class="active error"></div> -->
</div>
</template>
<script setup lang="ts">
const isactive = true
const activeClass = 'active'
const errorclass = 'error'
</script>
绑定内联样式 style
绑定对象
<template>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">1111</div>
// 结果为：<div style="color: blue; font-size: 30px;">1111</div>
</template>
<script setup lang="ts">
const activeColor = 'blue'
const fontSize = 30
</script>
直接绑定一个样式的对象也可以，这样更加简洁，结果跟上边一样。
<template>
<div :style="styleObject">1111</div>
</template>
<script setup lang="ts">
const styleObject = {
color: 'blue',
fontSize: '30px'
}
</script>
// 可以使用多个样式的对象，这些对象会被合并后渲染到同一元素上：
<div :style="[styleObject, styleObject2]">1111</div>
