uniapp动态修改样式_uniApp——v-for 动态class、动态style

:class="i.themColor"

{{i.title}}

{{i.txt}}

import common from '../../common/common.js';

export default {

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'

}]

}

:style="{'background':item.TypeColor}"

{{itemList[0].TypeName}}

预约

{{item.BookTimeTxt}}

{{item.Name}}

this.list={

"2":[

{

"Id":1657,

"CreateTime":"2019-01-26T15:05:40.5970000",

"ServiceUnitId":2004,

"ServiceMetadataId":5,

"LikedCount":0,

"Type":2,

"Status":false,

"ContentId":81,

"Name":"森林运动会",

"TypeName":"课程",

"TypeColor":"#68CDD4"

},

Object{...},

Object{...},

Object{...}

],

"3":[

Object{...},

Object{...}

],

"4":[

Object{...},

Object{...}

]

}