vue tabbar 页面切换,vue切换tab页记住状态
这篇文章主要介绍了VUE的标签页面切换的四种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
目录
1.静态实现方法：
2.第二种模拟动态方法
3.第三种动态数据方法
4.动态实现方法（模拟后台数据实现)
项目遇到的bug:
1.静态实现方法：
效果图：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题视图的标签交互/标题
链接版本=样式表href=./CSS/demo。CSS rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随
/头
身体
div class=demo_warp id=my
ul class=tab_tit
李：n==1？active : @ click= n=1 标题一/李
李：n==2？active : @ click= n=2 标题二/李
李：n==3？active : @ click= n=3 标题三/李
李：n==4？active : @ click= n=4 标题四/李
/ul
！-内荣-
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
脚本src= https://cdn。jsdelivr。net/NPM/vue/dist/vue。js /脚本
脚本vue。配置。生产提示=错误/脚本
脚本src=./js/tab。js type= text/JavaScript /script
/body
/html
钢性铸铁
*{
边距：0;
填充：0;
框大小：边框-框；
}
正文，html{
身高：100%;
}。演示曲速.tab_tit {
显示器：flex
flex:1；
边距：2雷姆
}。演示曲速.活动{
颜色：红色；
背景色：cadetblue
}。demo_warp ul li {
列表样式：无；
宽度：23%;
文本对齐：居中；
背景色：# ccc
保证金：0 1%;
}。演示曲速.tab_con
宽度：100%;
身高：3雷姆；
边框：1px纯色rgb(85，85，177)；
文本对齐：居中；
}
射流研究…
window.onload=function(){
新Vue({
艾尔："#我的",
数据：{//响应式的数据数据变化页面也会跟着变化
n:1
}
})
}
2.第二种模拟动态方法
效果如上图所示：(省略)
代码：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题视图的标签交互/标题
链接版本=样式表href=./CSS/demo。CSS rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随
/头
身体
div class=demo_warp id=my
ul class=tab_tit
标题中的李v-for=(v，I ):n==I？active : @ click= n=I { { v } }/Li
/ul
！-内荣-
div class=tab_con
div v-for=(v，i) in con v-show=n==i{{v}}/div
/div
/div
脚本src= https://cdn。jsdelivr。net/NPM/vue/dist/vue。js /脚本
脚本vue。配置。生产提示=错误/脚本
脚本src=./js/tab。js type= text/JavaScript /script
/body
/html
钢性铸铁
*{
边距：0;
填充：0;
框大小：边框-框；
}
正文，html{
身高：100%;
}。演示曲速.tab_tit {
显示器：flex
flex:1；
边距：2雷姆
}。演示曲速.活动{
颜色：红色；
背景色：cadetblue
}。demo_warp ul li {
列表样式：无；
宽度：23%;
文本对齐：居中；
背景色：# ccc
保证金：0 1%;
}。演示曲速.tab_con
宽度：100%;
身高：3雷姆；
边框：1px纯色rgb(85，85，177)；
文本对齐：居中；
}
射流研究…
window.onload=function(){
新Vue({
艾尔："#我的",
数据：{//响应式的数据数据变化页面也会跟着变化
n:0，
标题：[标题一,标题二,标题三,标题四],
反对意见：[内容一,内容二,内容三,内容四]
}
})
}
3.第三种动态数据方法
效果图：(滚动条的实现方式)
代码：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题视图的标签交互/标题
链接版本=样式表href=./CSS/demo。CSS rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随
/头
身体
div class=demo_warp id=my
ul class=tab_tit
列表中的李v-for=(v，I :n==I？active : @ click= n=I { { v . title } }/Li
/ul
！-内荣-
div class=tab_con
列表v-show= n==I“{ v . con } }/div中的div v-for=(v，I)
/div
/div
脚本src= https://cdn。jsdelivr。net/NPM/vue/dist/vue。js /脚本
脚本vue。配置。生产提示=错误/脚本
脚本src=./js/tab。js type= text/JavaScript /script
/body
/html
钢性铸铁
*{
边距：0;
填充：0;
框大小：边框-框；
}
正文，html{
身高：100%;
}。演示曲速.tab_tit
显示器：flex
justify-content:space-between；
空白：nowrap
溢出-y:隐藏；
溢出-x:滚动；
边距：1% 1% 1% 0;
}
:-网络工具包-滚动条{
显示：无；
}。演示曲速.活动{
颜色：红色；
背景色：cadetblue
}。demo_warp ul li {
列表样式：无；
填充：1.2% 3.2%;
文本对齐：居中；
背景色：# ccc
左边距：1%;
}。演示曲速.tab_con
宽度：100%;
身高：3雷姆；
边框：1px纯色rgb(85，85，177)；
文本对齐：居中；
}
射流研究…
window.onload=function(){
新Vue({
艾尔："#我的",
数据：{//响应式的数据数据变化页面也会跟着变化
n:0，
列表：[//可以有很多条数据//数组对象的形式
{标题：标题一，con:内容一},
{标题：标题二，con:内容二},
{标题：标题三，con:内容三},
{标题：标题四，con:内容四},
{标题：标题五，con:内容五},
{标题：标题六，con:内容六},
{标题：标题七，con:内容七},
{标题：标题八，con:内容八},
]
}
})
}
4.动态实现方法(模拟后台数据实现)
效果图：
代码：
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题视图的标签交互/标题
链接版本=样式表type=text/css href=./CSS/demo。CSS rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随
/头
身体
div class=demo_warp id=my
ul class=tab_tit
列表中的李v-for=(v，I :m==I？active : @ click= m=I :key= I . title { v . title } }/Li
/ul
！-内荣-
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 item list :class= n==index？active : @ click= n=index :key= index { item。name } }/Li
/ul
！-内荣-
div class=tab_con
v-show= n==index :key= index { item。州} }/分区
/div
/div
脚本src= https://cdn。jsdelivr。net/NPM/vue/dist/vue。js /脚本
脚本vue。配置。生产提示=错误/脚本
脚本src=./node _ modules/axios/dist/axios。js /脚本
脚本src=./js/tab。js type= text/JavaScript /script
/body
/html
钢性铸铁
*{
边距：0;
填充：0;
框大小：边框-框；
}
正文，html{
身高：100%;
}。演示曲速.tab_tit{
显示器：flex
justify-content:space-between；
空白：nowrap
溢出-y:隐藏；
溢出-x:滚动；
边距：1% 1% 1% 0;
}
:-网络工具包-滚动条{
显示：无；
}。演示曲速.活动{
颜色：红色；
背景色：cadetblue
}。demo_warp ul li {
列表样式：无；
填充：1.2% 3.2%;
文本对齐：居中；
背景色：# ccc
左边距：1%;
}。演示曲速.tab_con
宽度：100%;
身高：3雷姆；
边框：1px纯色rgb(85，85，177)；
文本对齐：居中；
}
tab.js
window.onload=function(){
新Vue({
艾尔："#我的",
data(){//响应式的数据数据变化页面也会跟着变化
返回{
n:0，
男：0,
列表：[
{标题：标题一，con:内容一},
{标题：标题二，con:内容二},
{标题：标题三，con:内容三},
{标题：标题四，con:内容四},
{标题：标题五，con:内容五},
{标题：标题六，con:内容六},
{标题：标题七，con:内容七},
{标题：标题八，con:内容八},
],
项目列表：[]
}
},
方法：{
getList:function(){//this: -【函数和定时器的这指向都是窗口（而我们是要这指向某视频剪辑软件实例)】
var that=this//局部定义改变这指向
//每执行此方法，提前清空数组，保证往下执行代码，数组为空
//这个。项目列表=[]；
axios({
方法：“得到”，
URL:“http://localhost:4000/list”
}).然后（函数(资源){
控制台。日志(分辨率)；
那个。项目列表=研究数据。结果；
}).接住(函数（错误){
console.log(错误);
})
}
},
已安装：函数(){
这个。getlist()；
},
})
}
节点服务器。射流研究…
/*
连接是一个结节中间件（中间件)框架
如果把一个超文本传送协议(超文本传输协议的缩写)处理过程比作是污水处理中间件就像是一层层的过滤网
每个中间件把超文本传送协议(超文本传输协议的缩写)处理过程中通过改写请求或（和)回应的数据、状态、实现了特定的功能
中间件就是类似于一个过滤器的东西在客户端和应用程序之间的一个处理请求和响应的方法。
*/
//创建中间介启动服务node node.js
var connect=require( connect )；//创建连接
var body parser=require( body-parser )；//正文解析用于处理JSON、RAW、Text和统一资源定位器编码的数据。
var lists={ }；
var app=connect()。use(bodyParser.json())//JSON解析。使用(主体解析器。urlencoded({ extended:true }))
//使用()方法还有一个可选的路径字符串对传入请求的统一资源定位器的开始匹配
//使用()方法来维护一个中间件队列。use(function(req，res，next){
//跨域处理
//您希望允许连接的网站
RES . set头( Access-Control-Allow-origin ， * )；//允许任何源
//请求宽度允许的方法
RES . set头( Access-Control-Allow-Methods ， CET ， POST ， OPTIONS ， PUT ， PATCH ， DELETE )；//允许任何方法
//您希望允许的请求标头
RES . set头( Access-Control-Allow-Headers ， * )；//允许任何类型
res.writeHead(200，{ Content-Type : text/plain/XML；charset=utf-8 })；//utf-8转码
next()；//下一个方法就是一个递归调用
})。use(/list ，function(req，res，next){
定义变量数据={
代码: 200 ,
消息:成功，
结果:[
{姓名：手机，状态：采购一},
{姓名：包包，状态：采购二},
{姓名：衣服，状态：采购三},
{姓名：电脑，状态：采购四},
{姓名：电子产品，状态：采购五}
]
}
决议结束(JSON。stringify(数据))；
next()；
})。use(/list_get ，function(req，res，next){
定义变量数据={
代码: 200 ,
消息:成功，
结果：列表
}
决议结束(JSON。stringify(数据))；
next()；
})。use(/list_add ，function(req，res，next){
if(req.method==POST){
控制台。日志(请求。身体。姓名)；
lists.push({name:req.body.name，state:req.body.state，id:index })；
var data={code:200， msg : success }；
决议结束(JSON。stringify(数据))；
}否则{
决议结束(JSON。stringify({ })；
}
next()；
})。use(/list_del ，function(req，res，next){
控制台。日志(请求。身体。id)；
//lists=列表。filter(list=list。id！=请求。身体。id)；
for(var I=0；ilists.lengthi ){
如果(请求。身体。id===列出【我】。id){
lists.splice(i，1)；
}
}
console.log(列表);
var data={code:200， msg : success }；
决议结束(JSON。stringify(数据))；
next()；
})。听(4000);
console.log(服务器在端口4000上启动。);
插件：(需要下载的插件)
1.先启动服务节点nodeServer.js(不能关闭，否则就会调取不到数据)
2.之后运行超文本标记语言页面。
项目遇到的bug:
某视频剪辑软件中迭代循环遍历后，当前内容不渲染的问题，因为这指向的问题导致。
解决方法一：
解决方法二：
解决方法三：
总结：url:接口要自己写后台接口。哦，这里只有一个模拟接口。nodeServer.js文件可以定义各种格式的数据类型，也可以在本地自定义和嵌套各种所需的类型。您可以在试用后调整背景数据。
推荐学习https://cn.vuejs.org/v2/guide/list.html VUE:文档：
以上就是这篇关于VUE标签页切换的四种方法的文章。有关VUE标签页切换的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。