vue中动态class的用法和进阶用法

1.class判断条件

<template>
<div id="box">
　　<strong :class="{red:a,bule:b}">凉凉三生三世，为你四年成河水<strong> 　　
</div>
<template>
<script>
　　new Vue({
　　　　el:"#box",
　　　　data:{  
　　　　　　a:true,
　　　　　　b:false
　　　　}
　　});
</script>

2.进阶用法

<template>
    <div :class="tabCls(item)" v-for="(item,index) in navList" :key="index"             
      @click="handleChange(index)">
        {{item.label}}
    </div>
</template>
<script>
    export default{
        methods:{
            tabCls(item){
                return [
                    //静态class属性
                    'tabs-tab',{
                        //动态class属性：给当前选中的tab加一个class
                        'tabs-tab-active':item.name ===this.currentValue
                    }
                ]
            },
            
        }
        
    }
</script>