vue样式（style）和属性（class）绑定的几种基本方法

绑定语法

<div v-bind:class=""></div>
可简写为：
<div :class=""></div>
style同上

class属性绑定：

1.我们可以为 v-bind:class 设置一个对象，从而动态的切换 class

<style>
    .test1{
        color:red;
    }
    .test2{
        background:yellow;
    }
</style>
<div id="app">
        <div :class="{test1 :a , test2: b}">你好吗？</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            a:true,//根据true/false判断是否执行class
            b:true
        }
    })
</script>

注意：若test2中color值设为green则会覆盖test1的样式，最后将得到黄底绿字。

2 我们也可以直接绑定数据里的一个对象：

<div id="app">
        <div :class="testObj">你好吗？</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            testObj:{
                color:red;
                background:yellow;
            }
        }
    })
</script>

3.数组绑定

<style>
    .test1{
        color:red;
    }
    .test2{
        background:yellow;
    }
</style>
<div id="app">
        <div :class="[test1Class,test2Class]">你好吗？</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            test1Class:test1,
            test2Class:test2
        }
    })
</script>

style样式绑定

1. 我们可以在 v-bind:style 直接设置样式：

<div id="app">
    <div :style="{color:cl,background:bk}">你好吗？</div></div>
<script>
    new Vue({
        el:'#app',
        data:{
            cl:'red',
            bk:'yellow'
        }
    })
</script>

2.直接绑定到一个样式对象，让模板更清晰：

<div id="app">
        <div :style="testObj">你好吗？</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            testObj:{
                color:red;
                background:yellow;
            }
        }
    })
</script>

3.v-bind:style 可以使用数组将多个样式对象应用到一个元素上：

<div id="app">
        <div :style="[test1,test2]">你好吗？</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            test1{
                color:'red'
            }
                background:'yellow'
            }

        }
    })
</script>