根据后端返回的值，设置不同的样式会有几种情况：

- 如果是el-table的话，有进行二次封装，我们就给它一个插槽

里面给它添加一个动态类名函数父组件即是以枚举的形式然后返回类名，再通过书写对应类名的样式即可：

效果图：

- 还可以通过多个三目运算去写：

代码：

//我这里外面有层循环，所以是item.ex_id，根据拿到的id进行判断

<van-tag :class="[
    item.ex_id == 1 ? 'yi' : '', 
    item.ex_id == 2 ? 'two' : '', 
    item.ex_id == 3 ? 'san' : '',
    item.ex_id == 4 ? 'si' : '',
    item.ex_id == 5 ? 'wu' : ''
   ]"
>
  {{ item.ex_name }}
</van-tag>

//css
.yi {
  background-color: red;
}
.two {
  background-color: orange;
}
.san {
  background-color: blue;
}
.si {
  background-color: green;
}
.wu {
  background-color: violet;
}

vue之循环添加不同class--动态符串

    <!-- vue之循环添加不同class -->
    <!-- 在vue中按条件为class动态添加直接使用:class="[{ active: isActive }, errorClass]"之类的表达式就可以

    但是如果我们要为一个循环列表按条件添加不同的class又如何写呢

    其实也很简单，我们只要把class按字符串拼接起来就可以了 -->
    <div class="section" >
        <div class="item" :class="'pages' + item.activeClass" v-for="(item, index) in datas" :key="index">
            {{item.label}}
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                datas:[
                    {
                        page: "page1",
                        activeClass: "1",
                        label: "11",
                    },
                    {
                        page: "page2",
                        activeClass: "2",
                        label: "22",
                    },
                    {
                        page: "page3",
                        activeClass: "3",
                        label: "33",
                    }
                ]
            }
        }
    }
</script>
<style lang="scss" scoped>
.pages1 {
    color: aquamarine;
}
.pages2 {
    color: blueviolet;
}
.pages3 {
    color: brown;
}
</style>

效果图：

【返回方法】class中还可以传方法，在方法中返回类名

html :class="setClass"

  setclass () {
        return 'p1';
      }
  }

一、对象语法

1、给v-bind:class 设置一个对象，可以动态地切换class，例如：

    <div :class="{'active':isActive}"></div>
</div>
<script>
var app = new Vue({
    el:'#app',
    data:{
        isActive:true
    }
})
</script>

最终渲染结果： <div class="active"></div>

2、对象中也可存在多个属性，动态切换class，：class 可以合class共存

vue实现点击循环中的某个元素，该元素添加类，（导航点击后改变样式，动态绑定class）

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .choose {
      background-color: pink;
      color: #fff;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div id="app">
    <button v-for="(item,index) in arr" v-on:click="btnClick(index)"
      v-bind:class="{choose:isActive[index]}">{{item}}</button>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      arr: ['喜羊羊', '美羊羊', '懒羊羊', '慢羊羊'],
      isActive: [false, false, false, false]
    },
    methods: {
      btnClick(index) {
        // console.log(index)
        for (let i in this.isActive) {
          Vue.set(this.isActive, i, false)
        }
        Vue.set(this.isActive, index, true)
      }
    }
  })
</script>
 
</html>

--------------------------------------------分割线-----------------------------------------------------------

vue动态添加class的几种方式