重点:"(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);
}
}
Vue.js之增删操作
最新推荐文章于 2020-09-08 16:13:11 发布