需要的物件：
1.一个云服务器
2.一双会cv的手
3.出了问题会自己百度的脑子
首先，直接粘代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HEAD> <TITLE>Vue学习</TITLE> </HEAD> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <style> *{ margin: 0; padding: 0; } body{ height: 100%; width: 100%; } .box{ height: auto; width: 300px; border: 1px solid #000; } span{ margin: auto 1%; } td{ text-align: center; } img{ max-width: 100%; height: auto; } .active{ background-color: aqua; } .biaotou{ background-color: grey; height: 20px; } .red{ color: red; } .biege{ background-color: beige; } .one_fruit{ height: 10%; } </style> <BODY> <div id="talk"> <div style="width: 30%;height: 400px;border: 1px solid #000;margin: 5% auto;overflow-y: scroll;"> <p v-for="(item , index) in history" :key="item.id">{{ item.price}}:{{ item.name }}</p> </div> <div style="width: 30%;margin: 5% auto;"> <input type="text" style="height: 20px;" v-model="one.name"> <button @click="Send()">发送</button> <button @click="del_all()">清空全部聊天记录</button> </div> </div> <script> const talk=new Vue({ el:'#talk', data:{ timecheck:'', history:[], one:{ //云服务器的申请对象 } }, methods:{ getData() { this.refresh() this.timecheck=setTimeout(this.getData, 500); }, async refresh(){ const res = await axios.get('https://applet-base-api-t.itheima.net/bill',{ //云服务器的申请对象 }) this.history = res.data.data console.log(res) }, async Send(){ const res = await axios.post('云服务器的网址',this.one) this.refresh() this.one.name='' }, async del_all(){ for(let i=0;i<this.history.length;i++){ const res = await axios.delete(`云服务器的网址`) } this.refresh() } }, mounted(){ this.getData() }, beforeDestroy(){ this.timecheck.delete() } }) </script> </BODY> </HTML>
出线任何问题，自己去百度，评论我代码有问题，我就骂你傻逼
标签：const,auto,color,res,height,html,聊天,服务器,软件 From： https://www.cnblogs.com/cocotun/p/17787037.html