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>

初始效果：

点击后：