2020-09-29 vue学习笔记——class与style绑定（对象语法、数组语法、用在组件上）

class与style绑定

1、对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示class是否存在取决于isActive是否为true，即数据属性是否为true。

你可以在对象中传入更多字段来动态切换多个 class。v-bind:class 指令也可以与普通的class共存

.active{
   
        width:100px;
        height:100px;
        border:1px solid #ccc;
    }
 .bg{
   
        background-color:azure;
    }
  .text-danger{
   
         color:red;
    }

<div id="app">
    <div v-bind:class="classObj"}>1</div>
    //这里的classObj包含了两个不同的class和一个普通的class
</div>

var vm = new Vue({
   
    el: '#app',
    data: {
   
       msg:"",
       isActive :true,
       isBg:true,
    classObj:{
   
    //这里将style里的多个数据绑定在一个对象中
       active