uniApp——v-for 动态class动态style _uniApp

【uniApp——v-for 动态class动态style】将相本无种，男儿当自强。这篇文章主要讲述uniApp——v-for 动态class动态style相关的知识，希望能为你提供帮助。
:class="i.themColor"

文章图片

< viewv-for="i in htmlJSON" class="column" :class="i.themColor"> < view class="uni-flex uni-column line"> < view class="flex-item flex-item-V uni-bg-red"> < view class="flex-item left"> < view class="title"> {{i.title}}< /view> < view class="txt"> {{i.txt}}< /view> < /view> < /view> < /view> < /view> < script> import common from \'../../common/common.js\'; export default { data() { return { htmlJSON:common.kdtHomeHtmlJSON } }, methods: { }, mounted() { } } < /script> < style lang="scss"> // body .content{ width: 750upx; height: 634upx; } // 内容： .colorA268D4{ background:#A268D4 url(../../static/images/kdt/icon-test.png) no-repeat530upx 45upx; background-size: 125upx; } .colorFA5E8A{ background:#FA5E8A url(../../static/images/kdt/icon-.png) no-repeat530upx 45upx; background-size: 125upx; } .color58C4CC{ background:#58C4CC url(../../static/images/kdt/icon-curriculum.png) no-repeat530upx 45upx; background-size: 125upx; } .color7E8FEF{ background:#7E8FEF url(../../static/images/kdt/icon-family.png) no-repeat530upx 45upx; background-size: 125upx; } .column { width: 702upx; height: 182upx; margin:17upxauto; 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 } } < /style> //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}"

文章图片

< !-- 体测 --> < view class="block"v-for="itemList in list"> < view class="title"> < view class="title-word"> {{itemList[0].TypeName}} < /view> < /view> < view class="content" v-for="(item,index) in itemList" :key="index"> < !-- 日历选择器 --> < picker mode="date" :value="https://www.songbingjia.com/android/item.BookTime"@change="bindDateChange($event,item)"> < view class="book left" v-if="!item.BookTime"> < image src="https://www.songbingjia.com/static/images/icon-calendar.png" mode=""> < /image> < view class="text"> 预约 < /view> < /view> < view class="booked left" v-else> < text> {{item.BookTimeTxt}}< /text> < image src="https://www.songbingjia.com/static/images/icon-calendar.png" mode=""> < /image> < /view> < /picker> < !-- 分割西线 --> < view class="break left" > < view class="break-line-pe left" :style="{\'background\': item.TypeColor}"> < /view> < /view> < !-- 题目 --> < view class="message-pe left" :style="{\'background\': item.TypeColor}"> < view class="message-info nowrap"> {{item.Name}} < /view> < /view> < /view> < view class="box"> < /view> < /view> < script> 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{...} ] } < script>