uni-app v-for dynamic switching loop iterates class, style dynamic handover

 Dynamic switching class, the main code: : class = "i.themColor" 

<view  v-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-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 
        } 
    }
     
 </ style> / / commom.js 
Export default { 
    kdtHomeHtmlJSON: [{ 
        title: ' test data entry ' , 
        TXT: ' test data field "entry + upload", step! ' 
        ThemColor:
 
 ' colorA268D4 ' 
    }, 
    { 
        title: ' Admission teacher training ' , 
        TXT: ' improve teachers for physical education and sport basic knowledge, basic skills, practical ability ' , 
        themColor: ' colorFA5E8A ' 
    }, 
    { 
        title: ' fitness course ' , 
        TXT: ' to enhance teachers for basic knowledge of sports and sports fields, basic skills, practical ability ' , 
        themColor: ' color58C4CC ' 
    }, 
    { 
        title: ' parents work ' ,
        txt: 'To ensure that every parent can receive the child's physical achievements ' , 
        themColor: ' color7E8FEF ' 
    }] 
}

 

 Dynamic switching style, the main code:  : 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="item.BookTime"  @change="bindDateChange($event,item)">
                    <view class="book left" v-if="!item.BookTime">
                        <image src="../../static/images/icon-calendar.png" mode=""></image>
                        <view class="text">
                            预约
                        </view>
                    </view>
                    <view class="booked left" v-else  >
                        <text>{{item.BookTimeTxt}}</text>
                        <image src="../../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>