1. 理解 
在应用界面中, 某个(些)元素的样式是变化的
class/style绑定就是专门用来实现动态样式效果的技术
2.class绑定: :class='xxx'

 

2.1xxx是字符串

<h2>1. class 绑定: :class='****'</h2>
<!--a是一个变量-->
<p :class="a">XXX是字符串</p>
<!--合并的效果-->
<p class="classC" :class="a">XXX是字符串</p>

2.2xxx是对象

<p :class="{classA:true,classB:false}">XXX是对象</p>

<p :class="{classA:isA,classB:isB}">XXX是对象</p>

 2.3xxx是数组

<p :class="['classA','classB']">XXX数组</p>
3.style绑定 
<h2>2.style 绑定</h2>
<p :style="{color:activeColor,fontSize:fontSize+'px'}">:style="{color:activeColor,fontSize:fontSize+'px'}"</p>
全部代码： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class与style绑定</title>
    <style>
        .classA {
            color: #ff0000;
        }
        .classB {
            color: #0000ff;
        }
        .classC {
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="demo">
    <h2>1. class 绑定: :class='****'</h2>
    <!--a是一个变量-->
    <p :class="a">XXX是字符串</p>
    <!--合并的效果-->
    <p class="classC" :class="a">XXX是字符串</p>


    <p :class="{classA:true,classB:false}">XXX是对象</p>

    <p :class="{classA:isA,classB:isB}">XXX是对象</p>

    <p :class="['classA','classB']">XXX数组</p>


    <h2>2.style 绑定</h2>
    <p :style="{color:activeColor,fontSize:fontSize+'px'}">:style="{color:activeColor,fontSize:fontSize+'px'}"</p>

    <button @click="update">更新</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#demo',
        data:{
            a:'aclass',
            isA:true,
            isB:false,
            activeColor:'red',
            fontSize:20
        },
        methods:{
            update(){
                this.a='classB'
                this.isA=false
                this.isB=true
                this.activeColor='green'
                this.fontSize=30
            }
        }
    })


</script>
</body>
</html>