使用uniapp中，会遇到很多情况需要动态给元素赋值上动态class,比如状态切换，选中与否等很多情况，下面介绍下如何方便的给元素赋值上动态样式。

<!-- 原始的代码 -->
<view class="order_nav">
	<view class="item" @click="changeOrderType(0)">全部</view>
	<view class="item active" @click="changeOrderType(0)">待付款</view>
	<view class="item" @click="changeOrderType(0)">待发货</view>
	<view class="item" @click="changeOrderType(0)">待收货</view>
	<view class="item" @click="changeOrderType(0)">待评价</view>
	<view class="item" @click="changeOrderType(0)">已取消</view>
	<view v-for="item in orderNav" :class="{active:item.type==select_order_type}" class="item" @click="changeOrderType(item.type)">{{item.tit}}</view>
</view>

<!-- 修改后的代码 -->
<view class="order_nav">
	<view v-for="item in orderNav" :class="{active:item.type==select_order_type}" class="item" @click="changeOrderType(item.type)">{{item.tit}}</view>
</view>

<script>
export default {
    data(){
        return {
            orderNav:[{tit:'全部',type:0},{tit:'待付款',type:1},{tit:'待发货',type:2},{tit:'待收货',type:3},{tit:'待评价',type:4},{tit:'已取消',type:5}],
            select_order_type:0,
         }
    },
    onLoad(param) {
	if(param.type){
            this.select_order_type = param.type;
	}
    },
    methods: {
	changeOrderType(type){
	    this.select_order_type = type;
	},
	toOrderPage() {
	   uni.navigateTo({
	       url:'/pages/shop/order/info'
	    })
        }
    }
}
</script>

上面的例子中就是使用:class给元素赋值上动态元素 active
写法1
:class=”{active : item.type==select_order_type}” 当item.type等于select_order_type时会给元素添加上active的class样式，否则就不给。

写法2
:class=”curIndex == index? ‘active’ : ‘disable’ “
上面的写法就是三元写法 当curIndex等于index 时给active样式，反之给disable样式

写法3
:class=” is_show?’show’:hide’ “
上面的写法就写法2的变种，is_show变量是boolean类型，是true是就给show的样式，当是false时给hide的样式。

好了，大家看明白了吧。