class和style绑定

Vue - Class 与 Style 绑定

数据绑定一个常见需求是操作元素的class列表和它的内联样式，因为它们都是属性，我们可以用 v-bind处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind用于 class 和 style 时，Vue.js专门增强了它，表达式的结果类型除了字符串之外，还可以是对象或数组。

class的样式绑定

1. 字符串写法

<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
<div class="basic" :class="mood">{{name}}</div>

data:{
    mood:'normal'
}

2. 数组写法

<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
<div class="basic" :class="classArr">{{name}}</div>

data:{
    //打开控制台，就能添加和修改数据了，这适用于不确定个数和名字的时候使用
    classArr:['atguigu1','atguigu2','atguigu3']
}

3. 对象写法

<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
<div class="basic" :class="classObj">{{name}}</div>

data:{
    //打开控制台
    classObj:{
        atguigu1:false,
        atguigu2:false,
    }
}

style的样式绑定

1.对象写法

<!-- 绑定style样式--对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div>

data:{
    styleObj:{
        fontSize: '40px',
        color:'red';
    },
    styleObj2:{
        backgroundColor:'orange'
    },
}

2.数组写法

<!-- 绑定style样式--数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div>

styleArr:[
        {
            fontSize: '40px',
            color:'blue',
        },
        {
            backgroundColor:'gray'
        }
    ]

总结：
1.类名不确定，个数确定，需要在多个样式中动态选择多个或者一个，选择字符串表达方式
2、类名和个数不确定，要动态添加删除的，选择数组写法
3、类名和个数确定，需要动态决定用不用，选择对象写法
4、style样式的对象写法和数组写法都可以