uniapp classとstyleのバインド

<template>
	<view>
		<view :class="boxClassName">
			<view class="box-item" :class="[age>1?'bor':'',sex==' '?'fos':'']">
				{{items}}
			</view>
			<view class="box-item">
				{{items}}
			</view>
			<view class="box-item">
				{{items}}
			</view>
			<view class="box-item">
				{{items}}
			</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				items:"ocean",
				boxClassName:"box",
				age:2,
				sex:" ",
			}
		},
		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-item{
	width: 150upx;
	height: 150upx;
	color: #007AFF;
	background-color: #3F536E;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30upx;
}
.bor{
	border: 5upx solid red;
}
.fos{
	background: #E88880;
}
</style>