【Vue】class和style的绑定

---

在vue中可以使用[v-bind]指令绑定class与style

class

可以传给 v-bind:class 一个对象，以动态地切换 class

<style>
    .divColor{
     
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

<div id="root" v-bind:class="{divColor:flag}"></div>

<script type="text/javascript">
    const vm = new Vue({
     
        el:'#root',
        data: {
     
            flag: true,
        }
    })
</script>

class 作为对象处理：当我们需要在一个元素上绑定很多个类的时候，我们可以把需要添加的类抽取出来，作为一个对象处理

<style>
    div{
     
        width: 100px;
        height: 100px;
    }
    .red{
     
        background-color: red;
    };
    .border{
     
        border: 1px solid black;
    }
    .radius{
     
        border-radius: 50%;
    }
</style>

<div id="root" v-bind:class="classObj"