VUE-class样式

<template>
	<view>
		<view> 对象语法</view>
		<!-- 1 一般语法 -->
		<view class="border bg static">{{showValue}}</view>

		<!-- 2 对象语法 -->
		<view  :class="{border:hasBorder,bg:hasBg}" class="static">{{showValue}}</view>

		<!-- 3 绑定的数据对象不必内联，定义在模板里 -->
		<view  :class="classObj" class="static">{{showValue}}</view>

		<!-- 4 也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式： -->
		<view  :class="classObjCom" class="static">{{showValue}}</view>

		<!-- 5 也可以使用三元表达式 -->
		<view  :class="(hasBorder?'border':'')+(hasBg?' bg':'')" class="static">{{showValue}}</view>
		
		<view> 数组语法</view>
		<!-- 1 一般数组 -->
		<view  :class="['border','bg','static']">{{showValue}}</view>

		<!-- 2 定义在模板里 -->
		<view  :class="[borderClass,bgClass,'static']">{{showValue}}</view>

		<!-- 3 三元表达式：根据条件切换列表中的 class -->
		<view  :class="[hasBorder?'border':'',hasBg?'bg':'','static']">{{showValue}}</view>

		<!-- 4 当有多个条件 class 时上面的写法有些繁琐，所以在数组语法中也可以使用对象语法 -->
		<view  :class="[{border:hasBorder,bg:hasBg},'static']">{{showValue}}</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showValue:'中国大使馆',
				hasBorder:true,
				hasBg:true,
				classObj:{
					border:true,
					bg:true
				},
				borderClass:'border',
				bgClass:'bg',
			}
		},
		computed: {
		  classObjCom: function () {
		    return {
		      border: this.hasBorder,
		      bg:this.hasBg
		    }
		  }
		},
		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>

所有样式均输出： <view class="border bg static">中国大使馆</view>