直接上代码

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. php pack、unpack、ord 函数使用方法（二进制流接口应用实例）

    在工作中,我也逐渐了解到pack,unpack,ord对于二进制字节处理的强大. 下面我逐一介绍它们.在我们工作中,用到它们的估计不多. 我在最近一个工作中,因为通讯需要用到二进制流,然后接口用php ...

  2. Nodejs 定时任务

    安装扩展:node-schedule npm install node-schedule 1.linux Crontab风格 var schedule = require('node-schedule ...

  3. net core 在docker(ubuntu)部署

    1.vs新建项目并发布,然后copy到linux系统上,我这里是用的虚拟机. 2 Dockerfile文件配置 FROM microsoft/dotnet:2.1-aspnetcore-runtime ...

  4. bootstrap 滚动监听 标签页 和 工具提示

    标签   <div class="container">     <h4>Tabs</h4>     <ul id="myTab ...

  5. 在Window上用cmd创建.htaccess文件

    Windows 图形下不能直接建立空名字的文件,所以没法直接创建.htaccess文件,不过可以通过命令行创建: cd /path/to/your/dir/ type nul>.htaccess ...

  6. P1216 [USACO1.5]数字三角形 Number Triangles

    题目描述 观察下面的数字金字塔. 写一个程序来查找从最高点到底部任意处结束的路径,使路径经过数字的和最大.每一步可以走到左下方的点也可以到达右下方的点. 7 3 8 8 1 0 2 7 4 4 4 5 ...

  7. fiddler+willow问题总结

    本文纯属用来记录自己学习过程中遇到的坑,如有朋友也遇到,可移步到这里查看是否为该问题导致. fiddler 安装不用说了,到官网直接去下载,自行下载最新版本 willow下载地址:http://qzo ...

  8. HTTP 三次握手  建立连接 和  四次握手断开连接

    三次握手建立连接    第一次握手:主机A发送位码为syn＝1,随机产生seq number=1234567的数据包到服务器,主机B由SYN=1知道,A要求建立联机: 第二次握手:主机B收到请求后要确 ...

  9. HDU 1729 Stone Game 石头游戏 （Nim, sg函数）

    题意: 有n个盒子,每个盒子可以放一定量的石头,盒子中可能已经有了部分石头.假设石头无限,每次可以往任意一个盒子中放石头,可以加的数量不得超过该盒中已有石头数量的平方k^2,即至少放1个,至多放k^2 ...

  10. 打通C/4HANA和S/4HANA的一个原型开发：智能服务创新案例

    今年6月SAP发布C/4HANA之后,有顾问朋友们在微信公众号后台留言,询问C/4HANA如何同SAP的数字化核心S/4HANA系统结合起来,从而打通企业的前后端业务,帮助企业实现数字化转型. 有的顾 ...