使用vue动态给元素添加不同的class属性，经常采用的方法很多，但经常只是添加两个class属性，如果是循环中添加2个以上的class呢？
<p v-for='(item,index) in list'>
<span :class='setClass(item.code)'>不同class不同颜色</span>
</p>与之前的方法不同，这里给class设置一个方法--setClass
methods: {
setClass(item){
let obj = {};
obj[this.colorList[item]]=true;
return obj;
}
}这个this.colorList是定义在data里面的，
colorList:{
1:'class-a',
2:'class-b',
3:'class-c'
}最后在style里面分别设置class-a，class-b，class-c的属性即可。
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
</head>
<body>
<div id="app">
<p v-for='(item,index) in list'>
<span :class='setClass(item.code)'>不同class不同颜色</span>
</p>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
list:[
{
code:1
},
{
code:2
},
{
code:3
}
],
colorList:{
1:'class-a',
2:'class-b',
3:'class-c'
}
},
methods: {
setClass(item){
let obj = {};
obj[this.colorList[item]]=true;
return obj;
}
}
})
</script>
<style type="text/css">
.class-a{
color:orangered
}
.class-b{
color:greenyellow
}
.class-c{
color: #2D8CF0;
}
</style>
</html>