阅读背景:

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="/go.html?url=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="/go.html?url=#">
                        <i aria-hidden="true" class="icon-search"></i> {{ data.type }}——{{s_data.count}}
                    </a>
                </li>
                <!--<li><a href="/go.html?url=#"><i aria-hidden="true" class="icon-point-right"></i> Poke A Friend</a></li>-->
                <!--<li><a href="/go.html?url=#"><i aria-hidden="true" class="icon-fire"></i> Incinerate Existing Friends</a></li>-->
            </ul>
        </li>

    </ul>
</div>

</body>
</html>
<!DOCTYPE html>
<html lang=



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: