vue(11)v-bind基础用法，持续更新

1、针对class切换
实现点击li，切换li的背景色和文字颜色
代码：

<template>
	<div id="testa">
		{{name}}
		<br />
		<button id="a">看下面</button>
		<ul>
			<li  v-for="(v,k) in name" :key="k" :class="{a1:flag1,a2:flag2}" @click="change()">{{k}}  {{v}}</li>
		</ul>
		<br />
	</div>
</template>

<script>
	export default {
		name: 'test',
		data() {
			return {
				name: [2,3,56,87,45,21,35,12],
				flag1:true,
				flag2:false
			};
		},
		methods:{
			change(){
				this.flag1=!this.flag1;
				this.flag2=!this.flag2;
			}
		}
	};
</script>
<style>
	#a{
		width: 100px;
		height: 50px;
	}
	.a1{
		cursor: pointer;
		background-color: rgba(0,0,0,0.6);
		color: white;
	}
	
	.a2{
		cursor: pointer;
		background-color: white;
		color: black;
	}
</style>

初始效果：

点击后：