比如我们要实现点击一次为红色，再点击还原，再点击红色，再点击还原，如此反复的效果

给div绑定一个class，这个class是否显示取决于isActivated，
如果isActivated是false那就不显示，
如果是true就显示，但是这个demo有个问题,当点了一次变红后就一直是红色，换不了原了，因此代码要修改

 <div id="app">
      <div @click="handleClick" :class="{activated:isActivated}">hello world</div>
    </div>

<script>
      var vm = new Vue({
        el: "#app",
        data: {
            isActivated: false
        },

给div绑定一个class，这个class是否显示取决于isActivated，如果isActivated是false那就不显示，如果是true就显示，但是这个demo有个问题,当点了一次变红后就一直是红色，换不了原了，因此代码要修改

var vm = new Vue({
        el: "#app",
        data: {
            isActivated: false
        },
        methods:{
            handleClick(){
                this.isActivated=!this.isActivated
            }
        }
      });

通过JS添加的class，怎么绑定事件

使用场景：
有时候根据需要会通过JS给元素动态添加class，然后通过该class给元素绑定事件，这时候我们通常使用的事件绑定方法会无效。
HTML

<button id="subBtn">给box添加class</button>
<div id="pox">
    <div>box</div>
</div>

JS

//点击按钮，给Box这个元素添加一个class,然后点击该元素，执行某种操作
$("#subBtn").click(function(){
 $("#pox>div").addClass("box")
})
//此处使用$(".box").click()或者时间绑定都是无效的，可以采用以下方式
 $("#pox").delegate(".box","click",[1,2,3],function(e){
 console.log(".........",e.data)
})

关于delegate()语法: JqueryObj.delegate(selector,events,data,handler)
JqueryObj——准备添加事件的元素的父类元素（随便都可以，Body也行）；
selector——准备添加事件的元素；
events——事件名称；
data——需要传递的数据，可以通过e.data获取到;
handler——执行程序的函数

万般滋味，都是生活。公众号求关注哦!

Uni-app中Class绑定与Style绑定
为了节约性能,我们将Class与Style的表达式通过compiler硬编码到uni-app中

支持语法和转换效果如下:

Class支持语法:

1 <view :class="{ active: isActive }">111</view>
2 <view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view
3 <view class="static" :class="[activeClass, errorClass]">333</view>
4 <view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view>
5 <view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>

Style支持语法:

1 <view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
2 <view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>

不支持Vue官方文档: Class与Style绑定中的classObject和styleObject语法.

此外还可以用computed方法生成class或style字符串,插入到页面中,

1 <template>
2     <!-- 支持 -->
3     <view class="container" :class="computedClassStr"></view>
4     <view class="container" :class="{active: isActive}"></view>
5     <!-- 不支持 -->
6     <view class="container" :class="computedClassObject"></view>
7 </template>