uniApp——v-for 動態class、動態style

: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:'體測數據錄入',
		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="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>