VUE---组合式API---评论列表---完整版代码

<template>
  <!-- <header>评论区</header> -->
  <main>
    <div class="com-top-temp">
      <div class="com-on">
        <div class="tos">
          <div class="head-photo"><img src="/myPhoto/hyzz.jpg" alt="" @click="btnShow"></div>
          <input type="text" @click="btnShow = true ,closeAllChild();" class="com-input Oinput" v-model="strCommentVal"
            placeholder="友善发言">
        </div>
        <div v-show="btnShow" class="btn">
          <div class="left-pic">
            <span>😊表情</span>
            <span>图片</span>
          </div>
          <button class="com-btn-s" @click="jsonParSubmit">评论</button>
        </div>
      </div>
      <ul>
        <!-- 一级v-for -->
        <li v-for="jsonParent in JsonComListParent()">
          <div class="com-one-temp">
            <div class="head-photo"><img src="/myPhoto/hyzz.jpg" alt=""></div>
            <div class="com-main-temp">
              <div class="com-user-name">{{ jsonParent.nick_name }}</div>
              <div class="com-content">{{ jsonParent.content }}</div>
              <div class="com-time-callback">
                <div class="com-time">{{ jsonParent.time }}</div>
                <div class="com-ballback" @click="showChild(jsonParent)">回复</div>
              </div>
              <div class="child-com-tem" v-show="jsonParent.boolChild">
                <ul>
                  <li>
                    <div class="com-on">
                      <div class="tos">
                        <input type="text" class="com-input" v-model="strCommentValChild" placeholder="友善发言">
                      </div>
                      <!-- <div class="btn">
                        <button class="com-btn-s" @click="jsonChildSubmit(jsonParent)">评论</button>
                      </div> -->
                      <div v-show="btnShow" class="btn ">
                        <div class="left-pic btnst">
                          <span>😊表情</span>
                          <span>图片</span>
                        </div>
                        <button class="com-btn-s" @click="jsonChildSubmit(jsonParent)">评论</button>
                      </div>
                    </div>
                    <ul>
                      <!-- 二级v-for -->
                      <li v-for="jsonChild in JsonComListChild(jsonParent.id)">
                        <div class="com-one-temp">
                          <div class="head-photo"><img src="/myPhoto/hyzz.jpg" alt=""></div>
                          <div class="com-main-temp">
                            <div class="com-user-name">{{ jsonChild.nick_name }}</div>
                            <div class="com-content">{{ jsonChild.content }}</div>
                            <div class="com-time-callback">
                              <div class="com-time">{{ jsonChild.time }}</div>
                              <!-- <div class="com-ballback">回复</div> -->
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </main>
</template>

<script setup>
import { ref } from "vue";
let JsonComList = ref([
  { id: 1, nick_name: "冬天的雨", content: "非常好的文章！", parent_id: 0, time: 1625454585, boolChild: false },
  { id: 2, nick_name: "半栈java", content: "底层实现有点看蒙圈了。java和c代码都有。c是class还差不多！", parent_id: 0, time: 1625368185, boolChild: false },
  { id: 3, nick_name: "用户891368888118", content: "挺多干货的！", parent_id: 0, time: 1625364585, boolChild: false },
  { id: 4, nick_name: "初级前端选手", content: "收藏了！！", parent_id: 0, time: 1622772585, boolChild: false },
  { id: 5, nick_name: "用户2784289850703", content: "非常好的文章！", parent_id: 0, time: 1622754585, boolChild: false },
  { id: 6, nick_name: "谢谢分享！", content: "一直看大佬的文章，真不错！", parent_id: 0, time: 1623186585, boolChild: false },
  { id: 7, nick_name: "真不错！", content: "优秀呀！", parent_id: 0, time: 1623222585, boolChild: false },
  { id: 8, nick_name: "又傻又笨的二狗", content: "加油，加油！", parent_id: 5, time: 1623225345, boolChild: false },
  { id: 9, nick_name: "昨天不再是昨天", content: "希望大佬多分享文章！ ", parent_id: 5, time: 1625039745, boolChild: false },
  { id: 10, nick_name: "用户8128696273319", content: "比较详细，谢谢！", parent_id: 5, time: 1624002945, boolChild: false },
  { id: 11, nick_name: "用户458666108980", content: "太强了！", parent_id: 5, time: 1625454701, boolChild: false },
  { id: 12, nick_name: "用户3009977972039", content: "感谢分享！", parent_id: 5, time: 1625454705, boolChild: false },
  { id: 13, nick_name: "用户1734135186928", content: "文章不错！", parent_id: 0, time: 1625454708, boolChild: false },
  { id: 14, nick_name: "用户8547655399924", content: "nice", parent_id: 0, time: 1625454696, boolChild: false },
  { id: 15, nick_name: "用户2450039971636", content: "还不错", parent_id: 1, time: 1625195496, boolChild: false },
  { id: 16, nick_name: "用户9527", content: "收藏饿了", parent_id: 1, time: 1625454733, boolChild: false },
]);
// 函数--更改发布评论按钮的状态
// function changeBtnShow() {
//   btnShow = true;
// }
// 函数--筛选 parent_id===0 的数据
function JsonComListParent() {
  let jsonParResult = JsonComList.value.filter((jsonItem) => jsonItem.parent_id === 0)
  return jsonParResult;
}
// 函数--筛选是 某个数据 的 子数据 的数据
function JsonComListChild(parId) {
  let jsonChildResult = JsonComList.value.filter((jsonItem) => jsonItem.parent_id === parId);
  return jsonChildResult;
}
// 定义一个变量 控制评论按钮的状态
let btnShow = ref(false);
// 定义一个变量 存储一级input的value
let strCommentVal = ref("");
// 定义一个变量 存储二级input的value
let strCommentValChild = ref("");
// 函数--判断 是否显示子评论
function showChild(jsonParent) {
  if (jsonParent.boolChild) {
    btnShow = false;
    jsonParent.boolChild = false;
  } else {
    closeAllChild();
    jsonParent.boolChild = true;
  }
}
// 函数--提交 一级评论的发布
function jsonParSubmit() {
  if (strCommentVal.value.trim() == "") {
    return;
  } else {
    let lastId = JsonComList.value.length;
    lastId++;
    JsonComList.value.push({ id: lastId, nick_name: "Chalise Joker", content: strCommentVal.value, parent_id: 0, time: 1605235597, boolChild: false });
    strCommentVal.value = " ";
  }
}
// 函数--提交 二级级评论的发布
function jsonChildSubmit(jsonParent) {
  if (strCommentValChild.value.trim() == "") {
    return;
  } else {
    let lastId = JsonComList.value.length;
    lastId++;
    JsonComList.value.push({ id: lastId, nick_name: "Chalise Joker", content: strCommentValChild.value, parent_id: jsonParent.id, time: 1605235597, boolChild: false });
    strCommentValChild.value = " ";
  }
}
// 函数--初始化boolchild
function closeAllChild() {
  for (let i = 0; i < JsonComList.value.length; i++) {
    JsonComList.value[i].boolChild = false;
  }
}
</script>

* {
    margin: 0;
    padding: 0;
    list-style: none;
}
main {
    max-width: 1000px;
    /* margin: 0 auto; */
}
.com-top-temp{
    border: 1px solid rgba(15, 181, 241, 0.334);
    overflow: hidden;
}
/* 仅用于排版 */
div.tos {
    display: flex;
}
div.com-on{  
    background-color: #EFEFEF;
    padding: 10px;
    /* width: 100%; */
}
/* 头像 */
div.head-photo{
    margin-right: 10px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border:1px solid rgb(185, 124, 195);
    overflow: hidden;
}
.head-photo img{
    width: 50px;
}
/* 一级input */
input.com-input{
    display: flex;
    flex: 1;
    height: 35px;
    padding: 0 0 0 10px;
}
/* 小按钮 */
.btn{
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}
.left-pic{
    margin-left: 50px;
}
.left-pic span{
    margin-right: 20px;
    color:#1757EA;
}
.left-pic span:hover{
    text-decoration: underline;
    text-decoration-color: #1757EA;
}
.btnst{
    margin-left: 0;
}
button.com-btn-s{
    color:#fff;
    background-color: #1757EA;
    border: 0;
    padding: 5px 10px;
}
button.com-btn-s:hover{
    background-color: #1757CE;
}
/* 一级内容 */
.com-one-temp{
    clear: both;
    padding: 10px 0px 10px 20px;
    display: flex;
    /* border: 1px solid pink; */
}
.com-time-callback{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #888;
    font-size: 14px;
    margin: 5px 0;
}
.com-ballback:hover{
    text-decoration: underline;
    color: #666;
}
.com-content{
    margin: 5px 0;
}
.com-ballback{
    margin-right: 10px;
}
.com-main-temp{
    width: 100%;
}
input:focus {
  border: 0;
  outline: 2px #0D86FF solid;
  border-radius: 3px;
}