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

<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‘
	}]
}