uni-app 动态修改组件样式

子组件

<template>
	<view :style="[{width:zjStyle.wSize+ 'rpx',height:zjStyle.hSize+ 'rpx'}]">
		<image :style="{height:zjStyle.imgHeight,width:zjStyle.imgWidth}" ></image>
	</view>
</template>
<script>
	export default {
		props:{
			flsStyle: {
				type: Object,
				default () {
					return {};
				}
			}
		},
		computed: {
			zjStyle(){
				return this.flsStyle
			}
		}
	}
</script>

父组件

<Fls-List :flsStyle="flsStyle"></Fls-List>

data() {
	flsStyle:{wSize:'510',hSize:'288',imgHeight:'172rpx',imgWidth:'510rpx'}
}

Tip:动态修改行内样式时,中横线:background-color报错,正确写法为:backgroundColor


版权声明:本文为GusLi原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。