vue删除v-for构建循环列表选中的一项
vue删除v-for构建循环列表选中的一项重点语句: this.removeList.splice(index,1);后续参考
·
vue删除v-for构建循环列表选中的一项
重点语句: this.removeList.splice(index,1);
<template>
<ul>
<li v-for="(item,index) in list" :key="index">
<img src="http://imgsrc.baidu.com/image/c0%3Dpixel_huitu%2C0%2C0%2C294%2C40/sign=40e76abd41ed2e73e8e48e6cee79c4e7/908fa0ec08fa513d500ae9e7366d55fbb2fbd963.jpg" alt="">
<p class="cardContent">
{{ item.content }}
</p>
<button @click="delItem(index)">删除</button>
</li>
</ul>
</template>
<script>
export default {
data: function () {
return {
list:[
{content:"1111111111111"},
{content:"2222222222222"},
{content:"3333333333333"},
{content:"4444444444444"},
{content:"5555555555555"}
]
}
},
methods: {
delItem: function(index){
this.list.splice(index,1);
}
}
}
</script>
<style scoped>
li{float: left; width: 200px;margin: 2em; list-style-type: none;}
li img{width: 200px;}
button{display: block; border: none; width: 100%;cursor: pointer; margin: 1em 0; padding: 1em 0;background: yellowgreen;}
button:hover{background: teal;color: seashell;}
</style>
更多推荐
已为社区贡献8条内容
所有评论(0)