vue绑定class样式的方式

由于不同的业务逻辑，根据不同逻辑，有不同的class样式，因此绑定class样式有以下几种方式：
绑定class样式：字符串写法
绑定class样式：数组写法
绑定class样式：对象写法

// 绑定class样式：字符串写法
<template>
	//绑定class样式：字符串写法,适用于：样式的类名不确定，需要动态指定
	<view class="basic" :class="mood" @click="changeMood">{{name}}</view>
	//绑定class样式：数组写法,适用于：要绑定的样式个数不确定，名字也不确定
	<view class="basic" :class="classArr">{{name}}</view>
	//绑定class样式：对象写法,适用于：要绑定的样式个数确定，名字也确定，但要动态决定用不用
	<view class="basic" :class="classObj">{{name}}</view>
</template>
<script>
export default {
	data() {
		return {
			name:"class样式绑定",
			mood:'normal',
			classArr:["a","b","c"],//这样写便于对数组的增删改查，动态切换
			classObj:{a:false,b:false}//这样写便于动态切换
		};
	},
	methods: {
		changeMood() {
		//定义一个数组，用来改变样式的切换,利用数组的生成随机数函数实现
		const arr = ['happy','sad','normal']；
		this.mood = arr[Math.floor(Math.random()*3)]//Math.random()：0~1的随机数，不包含1
		}
	}
}
</script>
<style>
.basic{
		width:500px;
		height:200px;
		border:1px solid black;
	}
	
.happy{
		border:5px solid red;
		background-color: rgba(255,255,0,0.644);
		background: linear-gradient(30deg,yellow,pink,orange,yellow);
	}
	
.sad{
	border:5px solid rab(2,197,2);
	background-color: gray;
	}
	
.normal{
		background: #1382f8;
	}
	
.a{
		background: #8B008B;
	}
	
.b{
		font-size:30px;
		text-shadow:2px 2px 10px red
	}
	
.c{
		border-radius:20px
	}
</style>