vue.js 利用SocketCluster实现动态添加数据及排序

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

直接上代码

html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script> <script src="../折叠菜单插件/3/js/jquery.min.js"></script> <script src="js/socketcluster.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>




<div style="position:fixed; top:0px;left: 0px;" >
<ul id="example-1"> <li class="block" v-for="data in items | orderBy 'count' -1" >
<input type="checkbox" name="item" id="{{ data.type }}" checked="checked" />
<label for="{{ data.type }}"><i aria-hidden="true" class="icon-users"></i> {{ data.type }} <span>{{ data.count }}</span></label>
<ul class="options">
<li v-for="s_data in data.small_type| orderBy 'count' -1">
<a href="#">
<i aria-hidden="true" class="icon-search"></i> {{ data.type }}——{{s_data.count}}
</a>
</li>


</ul>
</li> </ul>
</div></body>
</html>

/**
* Created by Administrator on 2016/11/4.
*/
$(function () { var socket = socketCluster.connect( {
port: 8000,
hostname: "193.168.15.205",
// path: '/public',
secure: false
});
var sub = socket.subscribe('attack_data');
var datas=[];
sub.watch(function (data) {
var $type=JSON.parse(data).data.type;
console.log($type);
var $is_cunzai=false; for(var i=0;i<datas.length;i++){ var model=datas[i];
if(model.type==$type){
datas.splice(i,1,{
type:$type,
count:model.count+1,
small_type:[{
type:"测试分类1",
count:30+model.count+1,
},{
type:"测试分类2",
count:50+model.count+1,
},{
type:"测试分类3",
count:90+model.count+1,
}
]
});
$is_cunzai=true;
break;
}
}
if(!$is_cunzai){
datas.push({
type:$type,
count:1,
small_type:[{
type:"测试分类1",
count:30,
},{
type:"测试分类2",
count:50,
},{
type:"测试分类3",
count:90,
}
]
});
} });
var example1 = new Vue({
el: '#example-1',
data: {
items: datas
}
});
});