uni-app 动态修改公共组件行内样式

公共组件

<template>
	<view>
		<view :style="{ color: font_color}">
			{{item}}
		</view>
		<view :style="[{ left: market_left, width: market_width + 'px', backgroundColor: bg_color }]"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				market_left: 0,
				market_width: 0,
			}
		},
		props: {
			font_color: {
				type: String,
				default: '#000'
			},
			bg_color: {
				type: String,
				default: '#fff'
			}
		}
	}
</script>

父组件

<van-tab :font_color="#666" :bg_color="#2E80EE"></van-tab>

注意

动态修改行内样式时，写中横线（background-color）会报错，正确写法应该是 backgroundColor

uni-app 动态修改class类名，绑定style语法