vue基础-Class介绍

vue3 Class绑定

一、 Class绑定

1、 说明

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表因为 class 是 attribute，我们可以和其他atribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组

2、代码展示

<template>
   <!--class绑定-->>
   <p :class="{'active':isActive,'text-danger':hasError}"> Class样式绑定1</p>
   <!-- class引用关系绑定 -->
   <p :class="classobject">Class样式绑定2</p>
   <!--数组绑定-->
   <p :class="[activeClass]">Class样式绑定3</p>
</template>

<script>
export default {
      
      
data(){
      
      
return{
      
      
isActive:true,
hasError:true,
classObject:f
   'active':true,
   'text-danger':true
},
activeClass:["active1","active2"]
}
}
</script>

3、有条件的渲染某个class

如果你也想在数组中有条件的渲染某个class，你可以使用三元表达式bool?expre1:expre2

<p :class="[isTrue?'active1':'active2']"> 样式</p>

4、数组和对象的嵌套使用

<template>
    <p :class="[{'active':isActive},errorClass]"></p>
</template>

温馨提示
素组和对象嵌套中，只能说数组嵌套对象，不能反其道而行