用vue项目 模拟一个微信聊天的 demo页面

创建个空页面  然后把这个复制进去(只加了简单逻辑,细节根据需求再去调整)

<template>

<div>

<!-- 标题 -->

<header class="headers">标题</header>

<!-- 内容 -->

<hgroup class="hgroups" ref="hgroups"></hgroup>

<!-- 底部 -->

<footer class="footers">

<el-input type="textarea" :rows="2" class="ipt" placeholder="请输入内容" v-model.trim="textarea"></el-input>

<el-button type="success" @click="sending">发送按钮</el-button>

</footer>

</div>

</template>

<script>

export default {

data() {

return {

textarea: "" //用户输入的内容

};

},

methods: {

sending() {

if (this.textarea) {