直接上代码

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. python_15(jquery)

    第1章 iquery 1.1 官网 1.2 流程图 1.3 Javascripts方法 1.4 书写格式 1.5 jQuery 的两大特 1.6 对比javascript代码量 第2章 入口函数(重要 ...

  2. File "<stdin>" , line 1

    写了一个hello.py,仅有一句,print 'hello world', 运行 Python hello.py 出错,提示: File "<stdin>" , li ...

  3. Spring AOP初步总结(二)

    该篇为Spring AOP的一个应用案例:系统日志 需求:将任何删除,更改或新增数据库的操作汇总到数据库中 步骤1:编写切面 @Aspect @Component public class SysLo ...

  4. Java中IO流文件读取、写入和复制

    //构造文件File类 File f=new File(fileName); //判断是否为目录 f.isDirectory(); //获取目录下的文件名 String[] fileName=f.li ...

  5. 安装drupal对服务器环境的要求

    Drupal 8 Apache 2.x PHP 5.5.9 及以上版本 MySQL 5.5.3 及以上版本 Drupal 7 Apache 2.x PHP 5.2.5 及以上版本(推荐 PHP 5.4 ...

  6. svn merge当主干修改后合并分支

    例如版本r1的主干创建分支r2,在r2上修改后得到r3,r1之后也修改得到r4,现在合并分支到主干上: 如果r3的修改和r4有冲突会提示出现冲突,因此不用担心主干合并后会被分支操作覆盖,因为这并不是简 ...

  7. vs2010调试sql2008存储过程

      1.安装vs2010sp1补丁 2.vs中打开服务器资源管理器,并进行数据库连接,连接时要注意 3. 4.可以打开数据库中的存储过程进行调试了

  8. js数组去重方法包括Es6(方法有很多,但是需要考虑兼容性和数据类型场景)

    1.Es6提供的方法 <script type="text/javascript"> //ES6里新添加了两个方法,set(set是一种新的数据结构,它可以接收一个数组 ...

  9. (转)SpringMVC学习(三)——SpringMVC的配置文件

    http://blog.csdn.net/yerenyuan_pku/article/details/72231527 读者阅读过SpringMVC学习(一)——SpringMVC介绍与入门这篇文章后 ...

  10. 特别困的学生 UVa12108(模拟题)

    一.题目 课堂上有n个学生(n<=10).每个学生都有一个“睡眠-清醒”周期,其中第i个学生醒Ai分钟后睡Bi分钟,然后重复(1<=Ai,Bi<=5),初始第i个同学处于他的周期的C ...