基于Vue实现tab栏切换内容不断实时刷新数据功能
更新时间：2017年04月13日 10:14:56 作者：苏小麦麦
在项目开发中遇到这样需求，就是有几个tab栏，每个tab栏对应的ajax请求不一样，内容区域一样，内容为实时刷新数据，实现方法其实很简单的，下面小编给大家带来了基于Vue实现tab栏切换内容不断实时刷新数据功能，需要的朋友参考下吧
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
先说一下产品需求，就是有几个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://9i0i.com/pic.php?p=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="http://9i0i.com/pic.php?p=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>
以上所述是小编给大家介绍的基于Vue实现tab栏切换内容不断实时刷新数据功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对程序员之家网站的支持！
相关文章
这篇文章主要介绍了Vuex入门学习之Getter详解,Vuex 允许我们在 store 中定义 getter(可以认为是 store 的计算属性),就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,需要的朋友可以参考下2023-11-11
v-model 是Vue.js中的一个重要指令,通过它我们可以轻松实现数据的双向绑定,本文介绍一些常用的 v-model 绑定修饰符,并解析它们的实现原理,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要介绍了vue 自定义指令directives及其常用钩子函数说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
Vue3.0之引入Element-plus ui样式的两种方法
本文主要介绍了Vue3.0之引入Element-plus ui样式的两种方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
本篇文章主要介绍了Vue系列：通过vue-router如何传递参数示例，具有一定的参考价值，有兴趣的可以了解一下。2017-01-01
这篇文章主要给大家介绍了关于VUE前端删除和批量删除的相关资料, 在实际的开发中,我们可以使用Vue.js来快速实现批量删除功能,文中给出了详细的代码示例,需要的朋友可以参考下2023-07-07
这篇文章主要为大家介绍了vue3中的非父子组件传值，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了vue通过?API?监听数组的变化,在?Vue?中，你可以通过监听数组的变化来更新界面，Vue?提供了一些特殊的语法以及?API?来实现对数组的监听，本文通过实例代码介绍的非常详细，需要的朋友可以参考下2023-05-05
今天小编就为大家分享一篇vue2.0 下拉框默认标题设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了vue使用axios跨域请求数据的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
最新评论