vue删除v-for构建循环列表选中的一项

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>

后续参考