vue中tab切换页面的实现方法有哪些?
Admin 2021-08-28 群英技术资讯 692 次浏览
这篇文章给大家分享的是有关vue中tab切换页面实现的内容,tab切换页面的应用场景有很多,小编觉得挺实用的,因此分享给大家做个参考,下面是四种实现tab切换页面的方法,感兴趣的朋友可以参考。
效果图:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>view的tab交互</title> <link rel="stylesheet" href="../css/demo.css" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow" > </head> <body> <div class="demo_warp" id="my"> <ul class="tab_tit"> <li :class="n==1?'active':''" @click="n=1">标题一</li> <li :class="n==2?'active':''" @click="n=2">标题二</li> <li :class="n==3?'active':''" @click="n=3">标题三</li> <li :class="n==4?'active':''" @click="n=4">标题四</li> </ul> <!-- neirong --> <div class="tab_con"> <div v-show="n==1">内容一</div> <div v-show="n==2">内容二</div> <div v-show="n==3">内容三</div> <div v-show="n==4">内容四</div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.config.productionTip=false </script> <script src="../js/tab.js" type="text/javascript"></script> </body> </html>
css
*{ margin: 0; padding: 0; box-sizing:border-box; } body,html{ height: 100%; } .demo_warp .tab_tit { display: flex; flex: 1; margin:.2rem; } .demo_warp .active { color:red; background-color: cadetblue; } .demo_warp ul li { list-style: none; width: 23%; text-align: center; background-color: #ccc; margin:0 1%; } .demo_warp .tab_con { width: 100%; height: 3rem; border:1px solid rgb(85, 85, 177); text-align: center; }
js
window.onload=function(){ new Vue({ el:'#my', data:{//响应式的数据 data变化页面也会跟着变化 n:1 } }) }
效果如上图所示:(省略)
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>view的tab交互</title> <link rel="stylesheet" href="../css/demo.css" rel="external nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <div class="demo_warp" id="my"> <ul class="tab_tit"> <li v-for="(v,i) in title" :class="n==i?'active':''" @click="n=i">{{v}}</li> </ul> <!-- neirong --> <div class="tab_con"> <div v-for="(v,i) in con" v-show="n==i">{{v}}</div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.config.productionTip=false </script> <script src="../js/tab.js" type="text/javascript"></script> </body> </html>
css
*{ margin: 0; padding: 0; box-sizing:border-box; } body,html{ height: 100%; } .demo_warp .tab_tit { display: flex; flex: 1; margin:.2rem; } .demo_warp .active { color:red; background-color: cadetblue; } .demo_warp ul li { list-style: none; width: 23%; text-align: center; background-color: #ccc; margin:0 1%; } .demo_warp .tab_con { width: 100%; height: 3rem; border:1px solid rgb(85, 85, 177); text-align: center; }
js
window.onload=function(){ new Vue({ el:'#my', data:{//响应式的数据 data变化页面也会跟着变化 n:0, title:["标题一","标题二","标题三","标题四"], con:["内容一","内容二","内容三","内容四"] } }) }
效果图:(滚动条的实现方式)
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>view的tab交互</title> <link rel="stylesheet" href="../css/demo.css" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow" > </head> <body> <div class="demo_warp" id="my"> <ul class="tab_tit"> <li v-for="(v,i) in lists" :class="n==i?'active':''" @click="n=i">{{v.title}}</li> </ul> <!-- neirong --> <div class="tab_con"> <div v-for="(v,i) in lists" v-show="n==i">{{v.con}}</div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.config.productionTip=false </script> <script src="../js/tab.js" type="text/javascript"></script> </body> </html>
css
*{ margin: 0; padding: 0; box-sizing:border-box; } body,html{ height: 100%; } .demo_warp .tab_tit{ display: flex; justify-content: space-between; white-space: nowrap; overflow-y: hidden; overflow-x: scroll; margin:1% 1% 1% 0; } ::-webkit-scrollbar{ display: none; } .demo_warp .active { color:red; background-color: cadetblue; } .demo_warp ul li { list-style: none; padding:1.2% 3.2%; text-align: center; background-color: #ccc; margin-left: 1%; } .demo_warp .tab_con { width: 100%; height: 3rem; border:1px solid rgb(85, 85, 177); text-align: center; }
js
window.onload=function(){ new Vue({ el:'#my', data:{//响应式的数据 data变化页面也会跟着变化 n:0, lists:[//可以有很多条数据//数组对象的形式 {title:'标题一',con:'内容一'}, {title:'标题二',con:'内容二'}, {title:'标题三',con:'内容三'}, {title:'标题四',con:'内容四'}, {title:'标题五',con:'内容五'}, {title:'标题六',con:'内容六'}, {title:'标题七',con:'内容七'}, {title:'标题八',con:'内容八'}, ] } }) }
效果图:
代码:
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>view的tab交互</title> <link rel="stylesheet" type="text/css" href="../css/demo.css" rel="external nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <div class="demo_warp" id="my"> <ul class="tab_tit"> <li v-for="(v,i) in lists" :class="m==i?'active':''" @click="m=i" :key="i.title">{{v.title}}</li> </ul> <!-- neirong --> <div class="tab_con"> <div v-for="(v,i) in lists" v-show="m==i" :key="i.con">{{v.con}}</div> </div> <!-- -----------动态数据----------- --> <ul class="tab_tit"> <li v-for="(item, index) in itemList" :class="n==index?'active':''" @click="n=index"
:key="index">{{item.name}}</li> </ul> <!-- neirong --> <div class="tab_con"> <div v-for="(item, index) in itemList" v-show="n==index" :key="index">{{item.state}}</div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.config.productionTip=false </script> <script src="../node_modules/axios/dist/axios.js"></script> <script src="../js/tab.js" type="text/javascript"></script> </body> </html>
css
*{ margin: 0; padding: 0; box-sizing:border-box; } body,html{ height: 100%; } .demo_warp .tab_tit{ display: flex; justify-content: space-between; white-space: nowrap; overflow-y: hidden; overflow-x: scroll; margin:1% 1% 1% 0; } ::-webkit-scrollbar{ display: none; } .demo_warp .active { color:red; background-color: cadetblue; } .demo_warp ul li { list-style: none; padding:1.2% 3.2%; text-align: center; background-color: #ccc; margin-left: 1%; } .demo_warp .tab_con { width: 100%; height: 3rem; border:1px solid rgb(85, 85, 177); text-align: center; }
tab.js
window.onload=function(){ new Vue({ el:'#my', data(){//响应式的数据 data变化页面也会跟着变化 return{ n:0, m:0, lists:[ {title:'标题一',con:'内容一'}, {title:'标题二',con:'内容二'}, {title:'标题三',con:'内容三'}, {title:'标题四',con:'内容四'}, {title:'标题五',con:'内容五'}, {title:'标题六',con:'内容六'}, {title:'标题七',con:'内容七'}, {title:'标题八',con:'内容八'}, ], itemList:[] } }, methods:{ getList:function(){//this:--【函数和定时器的this指向都是window (而我们是要this指向vue实例)】 var that=this;//局部定义改变this指向 //每执行此方法,提前清空数组,保证往下执行代码,数组为空 // this.itemList = []; axios({ method:'get', url:'http://localhost:4000/list' }).then(function(res){ console.log(res); that.itemList = res.data.result; }).catch(function(error){ console.log(error); }) } }, mounted:function(){ this.getList(); }, }) }
nodeServer.js
/* connect 是一个node中间件 (middeware)框架 如果把一个http处理过程比作是污水处理 中间件就像是一层层的过滤网 每个中间件把http处理过程中通过改写 request或(和)response的数据、状态、实现了特定的功能 中间件就是类似于一个过滤器的东西 在客户端和应用程序之间的一个处理请求和响应的方法. */ //创建中间介 启动服务 node node.js var connect = require('connect');//创建连接 var bodyParser=require('body-parser');//body解析 用于处理 JSON、RAW、Text和URL编码的数据. var lists = {}; var app = connect() .use(bodyParser.json())//JSON解析 .use(bodyParser.urlencoded({extended:true})) //use()方法还有一个可选的路径字符串 对传入请求的URL的开始匹配 //use()方法来维护一个中间件队列 .use(function(req,res,next){ //跨域处理 //website you wish to allow to connect res.setHeader('Access-Control-Allow-origin','*');//允许任何源 //Request Methods you width to allow res.setHeader('Access-Control-Allow-Methods','CET','POST','OPTIONS','PUT','PATCH','DELETE');//允许任何方法 //Request headers you wish to allow res.setHeader('Access-Control-Allow-Headers','*');//允许任何类型 res.writeHead(200,{"Content-Type":"text/plain/xml;charset=utf-8"});//utf-8转码 next();//next方法就是一个递归调用 }) .use('/list',function(req,res,next){ var data={ "code":"200", "msg":"success", "result":[ {name:"手机",state:"采购一"}, {name:"包包",state:"采购二"}, {name:"衣服",state:"采购三"}, {name:"电脑",state:"采购四"}, {name:"电子产品",state:"采购五"} ] } res.end(JSON.stringify(data)); next(); }) .use('/list_get',function(req,res,next){ var data={ "code":'200', "msg":"success", "result":lists } res.end(JSON.stringify(data)); next(); }) .use('/list_add',function(req,res,next){ if(req.method=='POST'){ console.log(req.body.name); lists.push({name:req.body.name,state:req.body.state,id:index++}); var data={"code":200,"msg":"success"}; res.end(JSON.stringify(data)); }else{ res.end(JSON.stringify({})); } next(); }) .use('/list_del',function(req,res,next){ console.log(req.body.id); //lists=lists.filter(list=>list.id!=req.body.id); for(var i=0;i<lists.length;i++){ if(req.body.id===lists[i].id){ lists.splice(i,1); } } console.log(lists); var data={"code":200,"msg":"success"}; res.end(JSON.stringify(data)); next(); }) .listen(4000); console.log('Server started on port 4000.');
插件:(需要下载的插件)
1.先启动服务node nodeServer.js(不能关闭,否则就会调取不到数据)
2.之后运行html页面 。
vue中v-for循环遍历后,当前内容不渲染的问题,因为this指向的问题导致.
解决方法一:
解决方法二:
解决方法三:
总结:url:接口要写自己后台的接口哦,这里只是模拟的接口,nodeServer.js文件可以定义多种格式的数据类型,也可以在本地自定义嵌套多种需要的类型,先试用之后可以在调后台数据。
以上就是关于vue中tab切换页面的实现方法,上述代码仅供参考,希望本文对大家学习vue框架有帮助,想要了解更多vue中tab切换页面的内容,大家可以关注群英网络其它相关文章。
文本转载自脚本之家
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
vue实现动态样式的方法有哪些?vue中我们想要实现动态样式的方法有很多,因此本文给大家分享几个vue实现动态样式实例供大家参考,对新手学习和理解vue实现动态样式有一定的帮助,接下来跟随小编来学习一下吧。
用JS怎样实现类似淘宝tab切换栏的功能?tab切换栏的功能还是比较实用的,例如淘宝页面的商品详情,规格参数和累计评价三个栏,点击不同的栏下面出现的内容不同,这样的设计的好处就是能让页面更整洁美观,接下来我们就看看这个效果要怎样做。
这篇文章主要为大家详细介绍了jQuery实现Table分页效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这篇文章给大家分享的是有关vue登录图形验证码的内容,图像验证码在很多登录页面都会使用到,小编觉得挺实用的,因此分享给大家做个参考,接下来一起跟随小编看看吧。
利用nodejs实现:逐行读写(从一个文件逐行复制到另外一个文件);逐行读取、处理和写入(读取一行,处理后,写入另一个文件)1.所需要的模块:fs,os,readline2.具体实现:a.功能的实现:readWriteFileByLine.jsvarfs=require('fs-extra');varos=require('os');varrl=requir
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008