直接上代码

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>
<!--<ul id="example-1">-->
<!--<li v-for="item in items">-->
<!--{{ item.type }}-->
<!--</li>-->
<!--</ul>--> <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>
<!--<li><a href="#"><i aria-hidden="true" class="icon-point-right"></i> Poke A Friend</a></li>-->
<!--<li><a href="#"><i aria-hidden="true" class="icon-fire"></i> Incinerate Existing Friends</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
}
});
});

  

vue.js 利用SocketCluster实现动态添加数据及排序的更多相关文章

  1. js表单动态添加数据并提交

    情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...

  2. Jquery+Ajax实现Select动态添加数据

    https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...

  3. vue.js 作一个用户表添加页面----初级

    使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...

  4. Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

    Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...

  5. 【javascript 动态添加数据到 HTML 页面】

    今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...

  6. 第27讲 UI组件之 ScrollView与底部动态添加数据

    第27讲 UI组件之 ScrollView与底部动态添加数据 1. ScrollView(滚动视图) ScrollView(滚动视图)是实现滚动的一个控件,只需要将需要滚动的控件添加到ScrollVi ...

  7. Android之ListView动态添加数据(SQLiteOpenHelper类添加数据)

    一.SQLiteOpenHelper类: 这次我们通过sqlite来动态添加数据,接下来我们创建一个openHelper.java,在前面sqlite博客中我们已经详细的讲了SQLite的创建及使用等 ...

  8. ASP.NET网页动态添加数据行

    一看到这标题<ASP.NET网页动态添加数据行>,想起来似乎有点难实现.因为网页的周期性原因,往往在PostBack之后,状态难于有所保留.但Insus.NET又想实现这样的效果,用户点击 ...

  9. 关于devexpress报表XtraReport,动态修改报表样式(.repx格式),动态添加数据并使用的理解

    一.基本概念: XtraReports 中的每个报表都由 XtraRepot 类的一个实例表示,或者由该类的子类来表示(这种情况更常见). 因此,每个报表都作为带区的容器使用,而每个带区中都包含报表控 ...

随机推荐

  1. SSAS中雪花模型

    上面的[销售事实表]与[门店]维度.[集团]维度就组成了一个雪花模型. 1.可以把[集团]关联到[门店]的维度上去: 2.如果要把[集团]作为一个单独的维度,先在[维度]里把Dim_Group添加进来 ...

  2. Exception in thread "main" java.lang.SecurityException: class "javax.servlet.FilterRegistration"'s signer information does not match signer information of other classes in the same package解决办法(图文详解)

    不多说,直接上干货! 问题详情 SLF4J: See http://www.slf4j.org/codes.html#multiple_bindings for an explanation. SLF ...

  3. 初始Activity启动模式

    之前断断续续接触了解过Android activity,可是从没有应用过,这次因为一个严重缺陷再次认识Activity的启动模式,相比以前理解更深入了,以后使用检查也就更方便了. 任务栈(Task S ...

  4. Notepad++ 安装 Zen Coding / Emmet 插件

    Zen Coding 插件 ============== 下载: Zen.Coding-Notepad++.v0.7.zip ==Installation== 1. Copy contents of ...

  5. 洛谷 P1334 瑞瑞的木板==P2664 【题目待添加】

    题目描述 瑞瑞想要亲自修复在他的一个小牧场周围的围栏.他测量栅栏并发现他需要N(1≤N≤20,000)根木板,每根的长度为整数Li(1≤Li≤50,000).于是,他神奇地买了一根足够长的木板,长度为 ...

  6. Jquery 错误提示插件

    这是一个简单的输入框错误提示插件,可拓展! .jq-error{ font-size:12px; min-width:150px; width:auto; max-width:350px; line- ...

  7. JAVA初级必须要搞懂的事项(希望对新手有所帮助)

    1        安装JDK=> (1,下载JDK,安装,一般目录为C:\Program Files\Java中:2,通过Dos命令测试JDK是否安装=>java –version命令查看 ...

  8. UVA1665 Islands (并查集)

    补题,逆序考虑每个询问的时间,这样每次就变成出现新岛屿,然后用并查集合并统计.fa = -1表示没出现. 以前写过,但是几乎忘了,而且以前写得好丑的,虽然常数比较小,现在重新写练练手.每个单词后面都要 ...

  9. C#中当服务器返回的数据json中key的值为数字类型,解决方案

    客户端向服务器发送请求后,服务器返回了一个json格式的字符串但是格式中key的值有些事数字{"1000":"55555"}; 类似这种格式的话就不能直接转化成 ...

  10. BOM函数之history对象

    前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...