V-demo item.vue

<template>
<div>
<li class="list-group-item">
<div class="handle">
<a href="#" @click="deleteItem">删除</a>
</div>
<p class="user"><span>{{comment.name}}</span><span>说：</span></p>
<p class="centence">{{comment.content}}</p>
</li>

</div>
</template>

<script>
export default{
props:{
comment:Object,
deleteComment:Function,
index:Number
},
methods:{
deleteItem(){
const {comment,index,deleteComment}=this
if(window.confirm(`确定删除${comment.content}的评论吗`)){
deleteComment(index)
}
}
}
}
</script>

<style>
li{
transition: .5s;
overflow: hidden;
}
.handle{
width: 40px;
border: 1px solid #CCCCCC;
background-color: #ffff;
position: absolute;
right: 10px;
top:1px;
text-align: center;
}
.handle a{
display: block;
}
</style>

V-demo item.vue

原文：https://www.cnblogs.com/weixin2623670713/p/13232490.html