Vue.js之增删操作

重点："(hero,index) in heros"，若写为 hero in heros会报错
若用到v-model，在data中 name:'',score:'',不然会报错，not defined


<li v-for="(hero,index) in heros" :key="index" :class="{'A':'red','B':'blue','C':'green','D':'pink'}[hreo.score]">
{{hero.name}},{{hero.score}}
 <button @click="del(index)">删除</button>
<li>

英雄姓名：<input type="text" name="" v-model="name">
英雄成绩：<input type="text" name="" >
<button @click="addHero">添加英雄</button>


若要v-model,return中必须要有 name:'';否则会报错

export default{
  data(){
    return{
       name:'',score:'',
       heros:[{
          id:1,
          name:'奥利安娜'，
          score:'A'
       },{
          id:2,
          name:'奥利'，
          score:'B'
       }

       ]
     }
  }

methods:{
  addHero(){  获取页面输入的值的时候，要用v-model绑定
    this.heros.push({
     name:this.name,
     score:this.score
   });
    this.name='', this.score='';   添加完后要记得清空
}

  del(){
     this.heros.splice(index,1);
   }
}