Vue实现聊天功能, 类似jqeury的append功能

使用netty+Vue在写一个聊天室的例子的时候, 发现vue 好像没有类似jquery的append实现有先后顺序的插入dom节点的操作。于是查阅资料，发现可以使用v-for读一个数组，然后后台获取的信息再push到数组中，就可以实现类似于append的操作了。

前端样式代码:半块菠萝 侵删

使用v-if 或者 v-show 判断类型是别人的消息还是自己发出的消息, 两者只渲染一个

<div id="msgframe">
	<div class="pnl-list" id="msgs" v-for="msg in left">
		<div class="msg robot" v-if="msg.type ? false : true ">
	    	<div class="msg-left" :worker="msg.name">
	    		<div class="msg-host photo"></div>
	    		<div class="msg-ball" :title="msg.time"  v-cloak v-html="msg.content"></div>
			</div>
		</div>
		<div class="msg guest" v-if="msg.type ? true : false ">
			<div class="msg-right" >
	    		<div class="msg-host headDefault"></div>
	    		<div class="msg-ball" :title="msg.time" v-cloak v-html="msg.content"></div>
	    	</div>
	    </div>
	</div>
</div>

var chats = new Vue({
        el: '#msgframe',
        data: {
            content: '',
            msglist: []
        },
        methods: {
            // 点击按钮发送消息
            sendmsg() {
                if (this.content === '') {
                    return ;
                }
                let list1 = {
                    // 区分自己发的消息还是接收到的消息, true=自己发的消息
                    type: true,
                    time: new Date(),
                    name:  username,
                    content: this.content
                };
                // push到所有消息列表中
                chats.msglist.push(list1);
                // 发送消息
                CHAT.socket.send(list1);
                // 清空输入框中的内容
                this.content= '';
            }
        }
    });

接收到消息时同理, 只要把数据放在list中 push到msglist数组中, 类型设置为false, 就可以达到以上效果了。