uniapp 数据渲染

<template>
	<view>
		<view :class="boxClassName">
			<view class="box-item">
				{{items}}
			</view>
			<view class="box-item">
				2
			</view>
			<view class="box-item">
				3
			</view>
			<view class="box-item">
				4
			</view>
			<view class="box-item">
				5
			</view>
		</view>
		<button type="primary" @tap="changgeUserName('划水小老虎')">修改</button>
		<button type="primary" @tap="classUpdate(boxClassName)">修改样式</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				items:"ocean",
				boxClassName:"box",
			}
		},
		methods:{
			changgeUserName:function(items){
				this.items = items;
			},
			classUpdate:function(boxClassName){
				if(boxClassName == 'box'){
					this.boxClassName = "box-two";
				} else {
					this.boxClassName = "box";
				}
				
			}
		}
	}
	
</script>

<style>
.box{
	width: 100%;
	height: 500upx;
	border: 1upx solid #333333;
	display: flex;
/* 	flex-direction: column;
	justify-content: center; */
	/* align-items: center; */
}
.box-two{
	width: 100%;
	height: 500upx;
	border: 1upx solid #333333;
	display: flex;
	background: #007AFF;
/* 	flex-direction: column;
	justify-content: center; */
	/* align-items: center; */
}
.box-item{
	color:#FFFFFF;
	height: 100upx;
	width: 200upx;
	/* line-height: 200upx; */
	font-size: 30upx;
	display: flex;
	font-weight: bold;
	justify-content: center;
	align-items: center;
	/* text-align: center; */
	
} 
.box-item:nth-of-type(odd){
	background: #007AFF;
}
.box-item:nth-of-type(even){
	background: #BEBEBE;
}
.box-item:first-of-type{
	flex-shrink: 0;
}

</style>