html5动态切换class,uni-app v-for循环遍历 动态切换class、动态切换style

{{i.title}}

{{i.txt}}

exportdefault{

data() {return{

htmlJSON:common.kdtHomeHtmlJSON

}

},

methods: {

},

mounted() {

}

}

//body

.content{

width: 750upx;

height: 634upx;

}//内容：

.colorA268D4{

background:#A268D4 url(../../static/images/kdt/icon-test.png) no-repeat 530upx 45upx;

background-size: 125upx;

}

.colorFA5E8A{

background:#FA5E8A url(../../static/images/kdt/icon-.png) no-repeat 530upx 45upx;

background-size: 125upx;

}

.color58C4CC{

background:#58C4CC url(../../static/images/kdt/icon-curriculum.png) no-repeat 530upx 45upx;

background-size: 125upx;

}

.color7E8FEF{

background:#7E8FEF url(../../static/images/kdt/icon-family.png) no-repeat 530upx 45upx;

background-size: 125upx;

}

.column {

width: 702upx;

height: 182upx;

margin:17upx auto;

padding-left: 25upx;

padding-top: 35upx;

line-height: 42upx;

letter-spacing: 4upx;

border-radius: 10upx;

.title{

color: #ffffff;

font-size: 31upx;

}

.txt{

width: 426upx;

font-size: 25upx;

color: #E6E6E6

}

}

//commom.js

export default{

kdtHomeHtmlJSON:[{

title:'体测数据录入',

txt:'体测数据现场“录入+上传”，一步到位！',

themColor:'colorA268D4'},

{

title:'入园师训',

txt:'提高幼师对于体育与运动领域基本知识，基本技能，实践操作能力',

themColor:'colorFA5E8A'},

{

title:'体能课程',

txt:'提升幼师对于体育与运动领域基本知识，基本技能，实践操作能力',

themColor:'color58C4CC'},

{

title:'家长工作',

txt:'确保每位家长都能收到孩子的体能成果',

themColor:'color7E8FEF'}]

}