VUE-style样式

<template>
	<view>
		<view> 对象语法</view>
		<!-- 1 一般语法 -->
		<view class="static" style="border:1px solid red;background:yellow;">{{showValue}}</view>
		
		<!-- 2 对象语法：CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名 -->
		<view  :style="{border:borderStyle,'backgroundColor':bgStyle,'font-size':fontSize+'rpx'}" class="static">{{showValue}}</view>
		
		<!-- 3 直接绑定到一个样式对象通常更好，这会让模板更清晰： -->
		<view  :style="styleObj" class="static">{{showValue}}</view>
		
		<!-- 4 对象语法常常结合返回对象的计算属性使用 -->
		<view  :style="styleObjCom" class="static">{{showValue}}</view>
		
		<!-- 5 三元表达式 -->
		<view  :style="objShow?styleObj:''" class="static">{{showValue}}</view>
		
		
		<view> 数组语法</view>
		<!-- 1 将多个样式对象应用到同一个元素上： -->
		<view  :style="[styleObj,styleObj2]" class="static">{{showValue}}</view>
		<view  :style="[objShow?styleObj:'',styleObj2]" class="static">{{showValue}}</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showValue:'中国大使馆',
				borderStyle:'1px solid red',
				bgStyle:'yellow',
				fontSize:14,
				styleObj:{
					border:'1px solid red',
					'backgroundColor':'yellow'
				},
				styleObj2:{
					'fontSize':'14rpx',
				},
				objShow:true
			}
		},
		computed:{
			styleObjCom:function(){
				return this.objShow?this.styleObj:this.styleObj2
			}
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	view{
		margin-bottom: 5rpx;
	}
	.static{
		font-size: 14rpx;
		padding: 10rpx;
		color: red;
	}
	.border{
		border: 1px solid red;
	}
	.bg{
		background: yellow;
	}
</style>

所有style设置，均输出 <view class="static" style="border:1px solid red;background:yellow;">中国大使馆</view>