class动态绑定不同样式

对于两种以上的样式切换，可用数组绑定并动态变化样式
样式中的写法：

<van-grid-item :class="css_list[index]"></van-grid-item>

data中声明css_list(元素为style中声明的css样式)和index：

data() {
	css_list:[
		"css1",
		"css2",
		"css3"
	],
	index: 0
}

method中可改变index的值从选择对应的样式：

methods: {
	//方法
	changeStyle() {
		...
		this.index = 1; //改变index的值从而实现选择不同的样式,index取0-this.css_list.length
		...
	}
}

style中定义css样式：

.css1 {
	...
}
.css2 {
	...
}
.css3 {
	...
}

对于多个互斥的选择，即多个按钮只能单选不能多选的情况
思路：style声明选中和非选中的两种样式，css_list中元素默认为未选择的样式，通过方法改变某项的值。
样式中写法以循环gird-item为例：

<van-grid-item
	v-for="(item,index) in timeOptionShow"
	:key="index"
	:class="css_list[index]"
	@click="getTimeItem(index)"
>
</van-grid-item>

data中写法：

data() {
	css_list: [
		"unselect_css",
		"unselect_css",
		"unselect_css", //数量与循环的gird-item数量对应
	],
	index: 0
	timeOptionShow: [
		"近七天",
		"近三个月",
		"近六个月",
	]
}

method中的写法，通过getTimeItem实现选择某个item则该item变为被选中的样式，其他为未被选中的样式

getTimeItem(index) {
	...
	//先将css_list所有的样式置为未选中样式
	for(let i = 0; i < this.css_list.length; i++) {
		this.$set(this.css_list, i, "unselect_css");
	}
	//再将选择的item样式变为选择的样式
	this.$set(this.css_list, index, "select_css");
	...
}

style中的写法，定义unselect_css和select_css

.select_css {
	...
}
.unselect_css{
	...
}