uni-app's handling of dynamic class and dynamic style

Handling of uni-app and WeChat applets for dynamic class and dynamic style

<view class="chartItem" :class="[positionClass(item.type)]" 
	:style="{ 'width':item.width+'%'}" v-for="item in list" :key="item.id" >
</view>
methods: {
	positionClass(type) {
        if(type=== 1){
			return ' name1'
		}else if(type=== 2){
			return ' name2'
		}else if(type=== 3){
			return ' name3'
		}else if(type=== 4){
			return ' name4'
		}else{
					
		}

	},
}
<style scoped lang="less">
	.name1{
		background-color: #2089E9
	}
					
	.name2{
		background-color: #34D698
	}
					
	.name3{
		background-color: #F4C135
	}
	.name4{
		background-color: #6C6C6C
	}
</style>

Guess you like

Origin blog.csdn.net/qq_35323539/article/details/126698469