![](https://i-blog.csdnimg.cn/blog_migrate/cb17b9d42f666a8fedcc44796640952f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a09b5fef8ce03da620699bdfe6c0a2ab.png)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>留言列表</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app" v-cloak style="width:500px;margin:0 auto;">
<div class="message">
<!--使用v-model实现username和message双向绑定-->
<v-input v-model="username"></v-input>
<v-textarea v-model="message" ref="message"></v-textarea>
<button @click="handleSend">发布</button>
</div>
<list :list="list" @reply="handleReply"></list>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="input.js"></script>
<script src="list.js"></script>
<script src="index.js"></s