vue学习(十三) 删除对象数组中的某个元素

//html
<div id="app">
　　//v-for循环就不写了 每一条数据最后都有一个删除的超链 .prevent阻止默认的跳转行为　只执行点击事件
　　<a href="" @click.prevent="del(item.id)">删除</a>
</div>
 
//script
<script>
　　var vm = new Vue({
　　　　el:'app',
　　　　data:{
　　　　　　id:'',
　　　　　　name:'',
　　　　　　list:[
　　　　　　　　{id:1, name:'惊鲵'}，
　　　　　　　　{id:2, name:'掩日'}，
　　　　　　　　{id:2, name:'黑白玄翦'}
　　　　　　]
　　　　},
　　　　methods:{//methods中定义了当前vue实例中所有可用的方法
　　　　　　del(id){
　　　　　　　　this.list.some((item, i)=>{
　　　　　　　　　　if(item.id==id){
　　　　　　　　　　　　this.list.splice(i, 1)
　　　　　　　　　　　　//在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
　　　　　　　　　　　　return true
　　　　　　　　　　}
　　　　　　　　})　　　　　　
　　　　　　},
　　　　　　del(id){
　　　　　　　　var index = this.list.findIndex(item =>{
　　　　　　　　　　if(item.id==id){
　　　　　　　　　　　　return true
　　　　　　　　　　}
　　　　　　　　})
　　　　　　　　this.list.splice(index,1)
　　　　　　}
　　　　}
　　})
</script>