我们想要的效果

我们想通过样式绑定实现：点击文字，文字变红色，再点击恢复黑色 的效果

class与对象绑定

先放上代码：

<div id="app">
    <div v-on:click="handlediv" v-bind:class="{activated:isactivated}">
        hello
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
    el:"#app",
    data:{
        isactivated:false
    },
    methods:{
        handlediv:function(){
        this.isactivated=! this.isactivated;
        }
        
    }
})
</script>

我们开始从div盒子解读，在div中进行点击事件监听，如果点击触发handlediv方法。（方法设计后面再说），然后在这个盒子上将一个名为class的变量和 {activated:isactivated} 这个对象进行绑定，既然这是个对象，就需要在实例中添加相应的对象isactivated并赋值false，也就是说activated：false（vue.js中activated意为进入页面就触发）。然后我们开始设计handlediv方法：改变isactivated的真假。最后在CSS中写入根据class：activated标签定位的样式即可

class与数组绑定

上代码：

<div id="app">
    <div v-on:click="handlediv" v-bind:class="[activated]">
        hello
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
    el:"#app",
    data:{
        activated:""
    },
    methods:{
        handlediv:function(){
            this.activated = this.activated==="activated"? "" : "activated" 
        }
    }
})
</script>

同样，从div开始，这里的class与一个名为activated的数组绑定，下面实例中对变量进行声明其为空，就等于div中class=""。然后开始设计handlediv方法:当这个盒子被点击时，为数组 activated 赋值 “activated”，后面这个activated是css样式class名字，这样class就能出现并与CSS样式联动了。这时，如果想再次点击恢复黑色，就通过下面这个判断语句实现就好。

handlediv:function(){
    if(this.activated ==="activated"){
            this.activated="";
    }				
    else{
        this.activated = "activated"
    }
}

可以简写成三元表达式，就在上面的代码中。

直接写内联样式

上代码：

<div id="app">
    <div :style="styleobj" @click="handledivclick">
	    hello
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
        styleobj:{
            color:"red",
            }   
        },
        methods:{
            handledivclick:function(){
    	        this.styleobj.color     =this.styleobj.color==="black" ? "red" : "black"
    	    }
        }
    })
</script>

div中直接绑定对象styleobj，实例中设计这个对象具有color属性并赋值red，这样相当于这个盒子的CSS样式具有color="red",然后设计点击方法：如果点击时这个盒子绑定颜色为black，则设置为red，反之为black。