如何在vue里面实现评论功能

Faith_ZL

于 2020-04-30 18:39:34 发布

阅读量5.6k

点赞数 7

分类专栏： Vue element UI

本文链接：https://blog.youkuaiyun.com/qq_43575827/article/details/105867374

版权

Vue 同时被 2 个专栏收录

25 篇文章

订阅专栏

element UI

8 篇文章

订阅专栏

本文分享了如何使用HTML、JavaScript和Vue.js实现文章评论功能的方法，包括界面设计和后端交互，通过点击评论按钮显示输入框，用户可以提交评论并实时更新在页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前几天做了文章的评论功能，现在用文字记录下来，希望帮助更多的人

//html
<div class="bottom">
          <div class="coomment" @click="show">
              <i class="el-icon-chat-line-round"></i>评论
          </div>
</div>
<div class="commentdec">
  <textarea v-model="newItem" v-on:keyup.enter="addNew" v-if="msg" />
       <ul>
              <li
                v-for="(item,index) in items"
                v-bind:class="{finished: item.isFinished}"
                v-on:click="toggleFinish(item)"
                :key="index"
              >{{item.label}}</li>
       </ul>
</div>

//js
 data() {
    return {
      msg: false,
      items: [],
      newItem: "",
    };
  },
 methods: {

 toggleFinish(item) {
      item.isFinished = !item.isFinished;
    },
    addNew() {
      axios
        .post("接口地址", 传参)
        .then(res => {});
      his.items.push({
        label: this.newItem,
        isFinished: false
      });
      this.newItem = "";
      this.msg = false;
    },
    show() {
      this.msg = !this.msg;
    },
}