先说一下产品需求，就是有几个tab栏，每个tab栏对应的ajax请求不一样，内容区域一样，内容为实时刷新数据，每3s需要重新请求，返回的数据在内容区域展示，每点击一次tab栏需停止其他tab栏ajax请求，防止阻塞，首次加载页面的时候又不能5个ajax同时请求，只需要请求第一个就好

也没有必要建立5个区域，控制显示隐藏，浪费性能，业务代码就不贴了，把大概原理的代码贴上来

先是用jq实现了一版

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="renderer" content="webkit">

    <title>Title</title>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

</head>

<body>

<div>

    <ul>

        <li>click</li>

        <li>click</li>

        <li>click</li>

        <li>click</li>

        <li>click</li>

    </ul>

</div>

<script>

    var arr=[

        function(){console.log(0);},

        function(){console.log(1);},

        function(){console.log(2);},

        function(){console.log(3);},

        function(){console.log(4);}

    ];

    var seti=setInterval(arr[0],1000)

    $('li').click(function(){

        clearInterval(seti)

        seti=setInterval(arr[$(this).index()],1000)

    })

</script>

</body>

</html>

再看vue版

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="renderer" content="webkit">

    <title>Title</title>

    <script src="https://unpkg.com/vue@2.2.6/dist/vue.min.js"></script>

</head>

<body>

<div id="vm">

    <button @click="tab(0)">click0</button>

    <button @click="tab(1)">click1</button>

    <button @click="tab(2)">click2</button>

    <button @click="tab(3)">click3</button>

    <button @click="tab(4)">click4</button>

    <div>

        <p>{{show}}</p>

    </div>

</div>

<script>

    var vm1 = new Vue({

        el: '#vm',

        data: {

            arr:[

                function(){console.log(0);},

                function(){console.log(1);},

                function(){console.log(2);},

                function(){console.log(3);},

                function(){console.log(4);}

            ],

            time1:'',

            time2:'',

            show:'',

            num:0,

        },

        methods: {

            tab: function(index){

                //如果每个tab的方法不一样，提前用一个数组把方法保存起来

                clearInterval(this.time1)

                this.time1=setInterval(this.arr[index],1000)

                //以下是调用同一种方法的时候可以不需要设置数组

                this.num = 0

                clearInterval(this.time2)

                this.time2 = this.fun(index)

            },

            fun:function(index){

                var _this=this;

                return setInterval(function(){

                    //写个随机数显示在页面，具体业务需求应该是ajax请求

                    var random=String(parseInt(Math.random()*100000000000))

                    //字符一个一个显示在页面上

                    _this.show=index+random.substring(0,_this.num++);

                },300)

            }

        },

        mounted:function(){

            this.time1=setInterval(this.arr[0],1000)

        }

    });

</script>

</body>

</html>

tab栏切换，内容为不断实时刷新数据的vue实现方法的更多相关文章

  1. vue中的tab栏切换内容变换

    <!DOCTYPE html> <html lang="cn-zh"> <head> <meta charset="UTF-8& ...

  2. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  3. tab栏切换制作

    tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...

  4. JS实现 Tab栏切换案例

    要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...

  5. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

  6. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

  7. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

  8. tab栏切换的特殊效果

    在实际的开发过程中,我们可能会遇到这种需求,如下图 左边是三个tab栏,右边是显示内容的div,当鼠标滑到坐标的tab上时,给它一个高亮显示,让它对应的内容在右边的div中显示出来,当鼠标移出的时候把 ...

  9. JavaScript实现Tab栏切换

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...

随机推荐

  1. C# 知识回顾 - 装箱与拆箱

    装箱与拆箱 目录 生活中的装箱与拆箱 C# 的装箱与拆箱 值类型和引用类型 装箱 拆箱 生活中的装箱与拆箱    我们习惯了在网上购物,这次你想买本编程书 -- <C 语言从入门到放弃> ...

  2. Linux tomcat部署War包，Linux在Tomcat部署JavaWeb项目，Linux部署War包

    Linux tomcat部署War包,Linux在Tomcat部署JavaWeb项目,Linux部署War包 >>>>>>>>>>>& ...

  3. linux 之 tcpdump

    tcpdump详细命令 -i 参数指定监听网口 -c 参数指定监听的数据包数量 -s 参数指定监听数据包大小 -w 参数指定监听数据包写入文件 如果要监听某几台主机数据包 例如10.10.10.10. ...

  4. 面向对象 "一"

    1:面向对象不是所有情况都适用. 2面向对象编程 a:定义类 calss Foo: 注意顶一个类的时候首字母必须是大写 def (方法一)(self,bb) pass b:根据创建对象,创建和Foo实 ...

  5. Java设计模式之《代理模式》及应用场景

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6525527.html 代理模式算是我接触较早的模式,代理就是中介,中间人.法律上也有代理, ...

  6. 又见Bug

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 作为一名开发者,如何解决遇到的问题.异常或Bug,是开发者必须要面对的,尽管问题很多,情况复杂,但还是有方法和技巧可寻的. 问题无非 ...

  7. 使用C#操作文件

    读写文本文件 使用C#读写文本文件需要5个步骤: 1.创建文件流 2.创建阅读器或者写入器 3.执行读写操作 4.关闭阅读器或者写入器 5.关闭文件流 例 using System; using Sy ...

  8. wemall app商城源码中基于PHP的ThinkPHP惯例配置文件代码

    wemall doraemon是Android客户端程序,服务端采用wemall微信商城,不对原商城做任何修改,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可随意定制修改.本文分享其中 ...

  9. burpsuite+sqlmap跨登录验证SQL注入

    (我操作的系统是kali linux) 1.利用burpsuite代理设置拦截浏览器请求(具体操作步骤可参考:http://www.cnblogs.com/hito/p/4495432.html) 2 ...

  10. Win10 UWP开发系列：开发一个自定义控件——带数字徽章的AppBarButton

    最近有个项目有一个这样的需求,在文章浏览页底部有几个AppBarButton,其中有一个是评论按钮,需要在评论按钮上显示一个红色数字,类似微信的新消息提醒: 这种设计在iOS和Android平台都是很 ...