vue 样式渲染，添加删除元素

<template>
<div>
<ul>
<li v-for="(item,index) in cartoon" :key="index" :class="{'A':'red','B':'green','C':'yellow','D':'blue','E':'pink '}[item.score]">
{{item.name}},{{item.score}}
<button @click="deleteC(index)">删除</button>
</li>
</ul>
<input type="text" v-model="name" />
<input type="text" v-model="score" />
<button @click="addC">添加</button>

</div>
</template>

<script>
export default{
data(){

return{
name:'',
score:'',
cartoon:[
{id:'1',name:"加菲猫",score:"A"},
{id:'2',name:"哆啦A梦",score:"B"},
{id:'3',name:"葫芦娃",score:"C"},
{id:'4',name:"变形金刚",score:"D"},
{id:'5',name:"奥特曼",score:"E"}
]
}
},
methods:{
addC(){
this.cartoon.push({
name:this.name,
score:this.score
});
this.name='';
this.score='';
},
deleteC(index){
this.cartoon.splice(index);
}
}
}

</script>

<style>
.red{
background: red;
}
.green{
background: green;
}
.yellow{
background: yellow;
}
.blue{
background: blue;
}
.pink{
background: pink;
}
</style>