1、绑定class

• 绑定单个class

 <div id="app">
   <p :class="{'active':isActive}">这是文字</p>
 </div>
 <script>
    //创建一个实例vm
    const vm = new Vue({
        el:"#app",
        data:{
            isActive:true
        }
    });
 </script>

渲染完成的结果

微信图片_20180108091607.jpg

• 绑定多个class

<p :class="{
        'active':isActive,
        'danger':isDanger,
        'error':isError
 }">这是文字</p>

 data:{
    isActive:true,
    isDanger:true,
    isError:false
 }

渲染完成的结果

微信图片_20180108092612.jpg

• 数组方式绑定class

 <p :class="[activeClass,errorClass]">
    这是文字
 </p>

 data:{
    activeClass:'active',
    errorClass:'error'
 }

渲染完成的结果

微信图片_20180108094944.jpg

2、绑定内联样式style

• 对象语法

 <p :style="{color:colorStyle}">
   这是文字
 </p> 

 data:{
    colorStyle:'red'
 } 

渲染完成的结果

微信图片_20180108095256.jpg

3、实例

此处的操作class的函数，具体见“原生JS”章节

• HTML代码如下

.red{
    color: red;
}
<div id="app">
    <p  id="p1" class="aa" :class="{red:isred}">我是变换的</p>
    <button @click="changeClass">换</button>
</div>

• JS代码如下

var vueObj = new Vue({
            el:"#app",
            data:{
                isred:true
            },
            methods:{
                changeClass:function(){
                    var _this = this;
                    if( hasClass(document.getElementById("p1"), 'red') ){
                        removeClass(document.getElementById("p1"), 'red');
                    }else{
                        addClass(document.getElementById("p1"), 'red');
                    }
                }
            }
});