vue开发实现评论列表

2022-04-18 19:26:13 来源：易采站长站作者：

本文实例为大家分享了vue + element ui实现锚点定位的具体代码，供大家参考，具体内容如下

index.html

<!DOCTYPE html><html> <head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="./static/css/bootstrap.css">  <title>y</title> </head> <body>  <div id="app"></div>  <!-- built   }  },  methods: {   add() {     //检查输入的合法性     const name=this.name.trim();     const content=this.content.trim();     if(!name || !content){      alert('姓名或内容不能为空')      return     }    //根据输入的数据封装成一个对象     const comment = {      name,      content     }     //添加到comments中     this.addComment(comment)     //清除数据     this.name = ''     this.content = ''   }  } }</script><style></style>

List.vue

<template> <div class="col-md-8">  <h3 class="reply">评论回复：</h3>  <h2 v-show="comments.length===0">暂无评论，点击左侧添加评论！！！</h2>  <ul class="list-group">   <Item v-for="(comment, index) in comments" :key="index" :comment="comment" :deleteComment="deleteComment" :index="index"/>  </ul> </div></template><script> import Item from './Item.vue' export default {  //声明接受属性,这个属性就会成为组件对象的属性  props:['comments','deleteComment'],  components:{   Item  } }</script><style> .reply {  margin-top: 0px; }</style>

Item.vue

<template> <li class="list-group-item">  <div class="handle">   <a href="javascript:;" @click="deleteItem">删除</a>  </div>  <p class="user"><span>{{comment.name}}</span><span>说：</span></p>  <p class="centence">{{comment.content}}</p> </li></template><script> export default {  props: { //指定属性名和属性值得类型   comment: Object,   deleteComment: Function,   index: Number  },  methods: {   deleteItem() {    const {comment,deleteComment,index}=this    if(window.confirm(`确定删除${comment.name}的评论吗？`)){     deleteComment(index)    }   }  } }</script><style> li {  transition: .5s;  overflow: hidden; } .handle {  width: 40px;  border: 1px solid #CCCCCC;  background: #FFFFFF;  position: absolute;  right: 10px;  top: 1px;  text-align: center; } .handle a {  display: block;  text-decoration: none; } .list-group-item .centence {  padding: 0px 50px; } .user {  font-size: 22px; }</style>

目录结构

vue开发实现评论列表