用vue3写一个评论列表

好的，可以参考以下代码：

<template>
  <div>
    <h2>评论列表</h2>
    <div v-if="comments.length === 0">暂无评论</div>
    <ul v-else>
      <li v-for="(comment, index) in comments" :key="comment.id">
        <span>{{ index + 1 }}.</span>
        <span>{{ comment.author }}：</span>
        <span>{{ comment.content }}</span>
        <button @click="deleteComment(comment.id)">删除</button>
      </li>
    </ul>
    <form @submit.prevent="submitComment">
      <input v-model="author" placeholder="请输入作者名称" />
      <textarea v-model="content" placeholder="请输入评论内容"></textarea>
      <button type="submit">提交评论</button>
    </form>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      comments: [
        {id: 1, author: '小明', content: '这是第一条评论'},
        {id: 2, author: '小红', content: '这是第二条评论'}
      ],
      author: '',
      content: ''
    });

    const deleteComment = (id) => {
      state.comments = state.comments.filter(comment => comment.id !== id);
    };

    const submitComment = () => {
      const newComment = {
        id: state.comments.length + 1,
        author: state.author,
        content: state.content
      };
      state.comments.push(newComment);
      state.author = '';
      state.content = '';
    };

    return {
      comments: state.comments,
      author: state.author,
      content: state.content,
      deleteComment,
      submitComment
    };
  }
};
</script>

在这个示例中，我们使用了Vue 3的Composition API来管理状态。使用`reactive`函数来创建响应式对象`state`，其中包括评论列表、当前输入的作者和内容。我们定义了两个方法`deleteComment`和`submitComment`，分别用于删除评论和提交评论。在模板中，我们使用了Vue 3的指令来绑定数据和事件处理函数，以及使用了`v-if`和`v-for`指令来渲染评论列表。