vue学习笔记10-class绑定

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

如下为接收对象的例子

操作性更麻烦

<template>
    <!-- 用''更容易辨别她是字符串 -->
    <p :class="{'active':isActive}">Class样式绑定</p>
    <!-- class里可以接收数组也可以接收对象 -->
</template>
<script>
export default{
    data(){
        return{
            isActive:true
            //true前面标签样式显示，false不显示
        }
    }
}
</script>

<style>

.active{
    color:red;
    font-size:30px;
}
</style>

如图所示样式显示

当为false时

保存后结果如下

 绑定对象

 可绑定多个对象

效果相同，且逻辑简单化，在编写时更加方便有。类似于列表渲染

绑定数组

class里面可以是对象还可以是对象的引用关系，还可以是数组

<template>
    <!-- 用''更容易辨别她是字符串 -->
    <p :class="{'active':isActive,'text-danger':hasError}">Class样式绑定1</p>
    <!-- class里可以接收数组也可以接收对象 -->
    <p :class="classObject">Class样式绑定2</p>
    <p :class="[arrActive,arrHansError]">Class样式绑定3</p>
</template>
<script>
export default{
    data(){
        return{
            isActive:true,
            //true前面标签样式显示，false不显示
            hasError:true,
            classObject:{
                'active':true,
                'text-danger':true
            },
            arrActive:"active",
            arrHansError:"text-danger"
        }
    }
}

如果你也想在数组中有条件地渲染某个class,你可以使用三元表达式

因为isActive此时是true所以显示字体放大样式

此处是字符串，所以可以有两个值

数组和对象

比前两种更复杂，数组和对象一起使用

温馨提示：数组和对象嵌套过程中，只能是数组嵌套对象，不能反其道而行

active是否显示取决于isActive,text-danger是否显示取决于hasError,都是true➡️显示