uniapp（vue）中动态添加绑定class

class动态设置 

<view  v-for="i in htmlJSON" class="column" :class="i.themColor"  >

1.静态添加

<button :class="btn_active==1?'progress-btn-active':''" @click="switchT(1)">未完成(15)</button>
<button :class="btn_active==2?'progress-btn-active':''" @click="switchT(2)">已完成(20)</button>

2.普通动态添加（比较常见）

<template>
    <view>
        <!--第一种写法-->
         <view :class="[isRed?'red':'green']">            test         </view>
        <!--简写法-->
        <view :class="{red:isRed}">
            test
        </view>
    </view>

</template>

<script>
    var _self;
    export default{
        data(){
            return{
                isRed: true
            }
        }
    }
</script>

<style>
    .red{
        color:#DD524D;
    }    .green{color:#00FF00}
</style>

3.动态切换案例

<template>
    <view>
        <view v-for="(item,index) in menus" class="menu" :class="[activeIndex==index?'menuActive':'']" @click="menuClick" :id="index">
            {{item}}
        </view>
    </view>
</template>

<script>
    var _self;
    export default{
        data(){
            return{
                activeIndex:0,
                menus:[
                    '新闻',
                    '汽车',
                    '读书'
                ]
            }
        },
        onLoad() {
            _self=this;
        },
        methods:{
            menuClick:function(e){
                var aId=e.target.id;
                
                _self.activeIndex=aId;
            }
        }
    }
</script>

<style>
.menu{
    padding: 10px;
    float: left;
    margin:5px;
    line-height: 36x;
}
.menuActive{color:#FF0000 !important;}
</style>