在本章中，小编将带领大家学习如何在Vue中使用v-bind:class和v-bind:style动态和静态的绑定样式

一、v-bind:style

1.静态绑定

  v-bind:style 的对象语法十分像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (第二个单词首字母大写) 或短横线分隔来命名。在静态的样式绑定中，可以分成以下三种写法：
① 对象内是单一的属性

<div v-bind:style={"width":owidth,'height':oheight,"background":obackground}></div>
<script>
    var vm = new Vue({
        el:".warp",
        data:{
                owidth:100+"px",
                oheight:100+"px",
                obackground:"red"
            }
    })
</script>

  在这个例子中，v-bind:style后面是一个对象，对象内部分别是 属性名：变量名 的格式，然后通过在Vue实例中为变量赋值。显然这种写法简单粗暴，代码不够整洁，所以有了第二种写法
② 对象语法

<div v-bind:style=ostyle></div>
<script>
    var vm = new Vue({
        el:".warp",
        data:{
                ostyle:{
                        width:100+"px",
                        height:100+"px",
                        background:"red"
                    }
            }
    })
</script>

  在这个例子中，将样式统一写在了Vue实例中的ostyle对象，相比上面第一种写法使得代码更加的简洁。
③ 数组语法

<div v-bind:style=[ostyle]></div>
<script>
    var vm = new Vue({
        el:".warp",
        data:{
                ostyle:{
                        width:100+"px",
                        height:100+"px",
                        background:"red"
                    }
            }
    })
</script>

  在这个例子中，只需要将对象名作为数组的元素即可，跟对象的写法很相似
以上三种就是静态绑定样式的写法，下面为大家分享动态的写法

2. 动态写法

v-bind:style 的动态写法是通过三目运算实现的，具体看如下代码：

<div v-bind:style={"width":owidth,'height':oheight,"background":isRed?obackground;''}></div> 
<script>
    var vm = new Vue({
        el:".warp",
        data:{
                ostyle:{
                        owidth:100+"px",
                        oheight:100+"px",
                        obackground:"red",
                        isRed:false
            }
    })
</script>

  在这个例子中，如果isRed的值为true，则跳转到obackground执行，否则就为空。
以上就是v-bind:style的静态和动态的写法，在有了上面的基础之后，相信大家对于v-bind:class 的写法也能很快的熟悉起来

二、v-bind:class

  使用v-bind:class指令绑定样式时，小编主要为大家分享动态的绑定方式，总共有两种写法：对象语法和数组语法

1.对象语法

  使用对象语法来绑定样式时，又可以细分成下面5中写法：
① 单纯的对象

<style>
    div{
            width: 100px;
            height: 100px;
    }
    .Active{
            background:red;
    }
</style>
<div v-bind:class={"Active":isActive}></div>
<script>
    var vm = new Vue({
        el:".warp",
        data:{
                isActive:true
    })
</script>

image.png

<style>
    div{
            width: 100px;
            height: 100px;
    }
    .Active{
            background:red;
    }
    .textCol{
                color: #00FF00;
    }
</style>
<div v-bind:class={"Active":isActive,"textCol":isText}>Hello,Vue</div>
<script>
    var vm = new Vue({
        el:".warp",
        data:{
                isActive:true,
                isText:true,
    })
</script>

image.png

<style>
    div{
            width: 100px;
            height: 100px;
    }
    .Active{
            background:red;
    }
    .big{
            color: black;
    }
</style>
<div class="big" v-bind:class={"Active":isActive}>Hello,Vue</div>
<script>
    var vm = new Vue({
        el:".warp",
        data:{
                isActive:true,
    })
</script>

image.png

<style>
    div{
            width: 100px;
            height: 100px;
    }
    .Active{
            background:red;
    }
    .textCol{
                color: #00FF00;
    }
</style>
<div v-bind:class=oclass>Hello,Vue</div>
<script>
    var vm = new Vue({
        el:".warp",
        data:{
                oclass:{
                        Active:true,
                        textCol:true,
                    }
    })
</script>

image.png

<style>
    div{
            width: 100px;
            height: 100px;
    }
    .Active{
            background:red;
    }
    .textCol{
                color: #00FF00;
    }
</style>
<div v-bind:class=oclass>Hello,Vue</div>
<script>
    var vm = new Vue({
        el:".warp",
        computed:{
                    oclass:function(){
                        return {
                            Active:true,
                            textCol:true
                        }   
                    }
                }
    })
</script>

image.png

以上5中就是对象语法中用来绑定样式的，接下来讲解数组语法

2.数组语法

数组语法主要有三种书写的形式
① 普通数组

<style>
    div{
            width: 100px;
            height: 100px;
    }
    .Active{
            background:red;
    }
    .textCol{
                color: #00FF00;
    }
</style>
<div v-bind:class="[activeClass,textClass]">Hello,Vue</div>
<script>
    var vm = new Vue({
        el:".warp",
        data:{
                    activeClass:'Active',
                    textClass:'textCol'
                }
    })
</script>

image.png

<div v-bind:class="[isActive? activeClass : '']">Hello,Vue</div>
<script>
    var vm = new Vue({
        el:".warp",
        data:{
                    isActive:true,
                    activeClass:'Active',
                }
    })
</script>

image.png

<div v-bind:class="[{Active:isActive},textClass]">Hello,Vue</div>
<script>
    var vm = new Vue({
        el:".warp",
        data:{
                    isActive:true,
                    activeClass:'Active',
                    textClass:'textCol'
                }
    })
</script>

image.png