循环数据中的数组并删除数组中的一项
最佳答案 问答题库408位专家为你答疑解惑
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>循环数组并删除数组中的一项</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in booklist" :key="item.id">
<!-- <span>{{item}}</span> -->
<!-- 这是错的，因为是item数组中的每一项，而我们要的只是书本名字 -->
<span>{{item.name}}</span>
<span>{{item.author}}</span>
<!-- 删除时有id优先用id，没id用索引 -->
<button @click="del(item.id)">删除</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
booklist:[
{id:1,name:'三国演义',author:'三'},
{id:2,name:'水浒传',author:'水'},
{id:3,name:'红楼梦',author:'红'},
{id:4,name:'西游记',author:'西'},
]
},
methods:{
del(id){
// filter:根据条件，保留满足条件的对应项，得到一个新数组,但不会改变原数组，原数组没改变，视图不会更新页面不会变化，要赋值回去
this.booklist=this.booklist.filter(item => item.id !== id)
}
}
})
</script>
</body>
</html>
99%的人还看了
相似问题
猜你感兴趣
版权申明
本文"循环数据中的数组并删除数组中的一项"：http://eshow365.cn/6-30425-0.html 内容来自互联网，请自行判断内容的正确性。如有侵权请联系我们，立即删除！
- 上一篇: USB学习相关资料
- 下一篇: Windows11无法打开Photoshop CC 2017问题解决