Four ways to switch tab pages in VUE
1. Static implementation method: Effect picture:
<!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 interaction</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">Title 1</li> <li :class="n==2?'active':''" @click="n=2">Title 2</li> <li :class="n==3?'active':''" @click="n=3">Title 3</li> <li :class="n==4?'active':''" @click="n=4">Title 4</li> </ul> <!-- neirong --> <div class="tab_con"> <div v-show="n==1">Content 1</div> <div v-show="n==2">Content 2</div> <div v-show="n==3">Content 3</div> <div v-show="n==4">Content 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:{//Responsive data data changes and the page will also change n:1
}
})
}
2. The second simulation dynamic method The effect is shown in the figure above: (omitted)
<!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 interaction</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:{//Responsive data data changes and the page will also change n:0,
title:["Title 1","Title 2","Title 3","Title 4"],
con:["Content 1","Content 2","Content 3","Content 4"]
}
})
}
3. The third dynamic data method Effect diagram: (How to implement the scroll bar)
Code:
<!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 interaction</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:{//Responsive data data changes and the page will also change n:0,
lists:[//There can be many data//array object in the form of {title:'Title 1',con:'Content 1'},
{title:'Title 2',con:'Content 2'},
{title:'Title Three',con:'Content Three'},
{title:'Title 4',con:'Content 4'},
{title:'Title Five',con:'Content Five'},
{title:'Title Six',con:'Content Six'},
{title:'Title Seven',con:'Content Seven'},
{title:'Title 8',con:'Content 8'},
]
}
})
}
4. Dynamic implementation method (simulating background data implementation) Effect picture:
Code:
<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 interaction</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>
<!-- -----------Dynamic Data----------- -->
<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(){//Responsive data data changes and the page will also change return{
n:0,
m:0,
lists:[
{title:'Title 1',con:'Content 1'},
{title:'Title 2',con:'Content 2'},
{title:'Title Three',con:'Content Three'},
{title:'Title 4',con:'Content 4'},
{title:'Title Five',con:'Content Five'},
{title:'Title Six',con:'Content Six'},
{title:'Title Seven',con:'Content Seven'},
{title:'Title 8',con:'Content 8'},
],
itemList:[]
}
},
methods:{
getList:function(){//this:--[this of functions and timers points to window (but we want this to point to the vue instance)]
var that=this; //Local definition changes this pointer //Each time this method is executed, clear the array in advance to ensure that the array is empty when the code is executed further // 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 is a node middleware framework. If you compare an HTTP processing process to sewage treatment, middleware is like a layer of filter. Each middleware rewrites the request or (and) response data and status in the HTTP processing process to achieve specific functions. Middleware is something like a filter, a method of processing requests and responses between the client and the application.
*/
//Create an intermediary to start the service node node.js
var connect = require('connect'); //Create a connection var bodyParser = require('body-parser'); //body parsing is used to process JSON, RAW, Text and URL encoded data.
var lists = {};
var app = connect()
.use(bodyParser.json()) //JSON parsing .use(bodyParser.urlencoded({extended:true}))
//The use() method also has an optional path string to match the beginning of the incoming request URL //The use() method maintains a middleware queue.use(function(req,res,next){
//Cross-domain processing//website you wish to allow to connect
res.setHeader('Access-Control-Allow-origin','*');//Allow any origin//Request Methods you width to allow
res.setHeader('Access-Control-Allow-Methods','CET','POST','OPTIONS','PUT','PATCH','DELETE'); //Allow any method //Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers','*');//Allow any type res.writeHead(200,{"Content-Type":"text/plain/xml;charset=utf-8"});//utf-8 transcoding next();//next method is a recursive call })
.use('/list',function(req,res,next){
var data = {
"code":"200",
"msg":"success",
"result":[
{name:"Mobile Phone",state:"Purchase 1"},
{name:"bag",state:"Purchase 2"},
{name:"clothes",state:"Purchase 3"},
{name:"Computer",state:"Purchase 4"},
{name:"Electronic products",state:"Purchase 5"}
]
}
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.');
Plug-in: (plug-in that needs to be downloaded)
1. Start the service node nodeServer.js first (cannot be closed, otherwise the data will not be retrieved) Bugs encountered in the project:After the v-for loop in vue is traversed, the current content is not rendered because of the problem pointed to by this. Solution 1:
Solution 2:
Solution 3:
Summary: url: The interface needs to write its own background interface. This is just a simulated interface. The nodeServer.js file can define data types in various formats, and can also nest multiple required types locally. You can try it first and then adjust the background data. Recommended to learn VUE: Documentation::https://cn.vuejs.org/v2/guide/list.html This concludes this article about the four methods of switching VUE tab pages. For more relevant VUE tab page switching content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
>>: Application scenarios and design methods of MySQL table and database sharding
Recommend
About the startup error caused by incompatibility between vmware workstations and device/credential
vmware workstations starts the virtual machine er...
Vue uses echarts to draw an organizational chart
Yesterday, I wrote a blog about the circular prog...
Analyze MySQL replication and tuning principles and methods
1. Introduction MySQL comes with a replication so...
Several common CSS layouts (summary)
Summary This article will introduce the following...
Research on the effect of page sidebar realized by JS
Table of contents Discover: Application of displa...
How to manually upgrade the kernel in deepin linux
deepin and Ubuntu are both distributions based on...
Perfect solution for JavaScript front-end timeout asynchronous operation
Table of contents What happens if a piece of code...
Linux uses join -a1 to merge two files
To merge the following two files, merge them toge...
Detailed explanation of HTML onfocus gain focus and onblur lose focus events
HTML onfocus Event Attributes Definition and Usag...
Use of Vue filters and custom instructions
Table of contents Filters 01.What is 02. How to d...
A brief discussion on JS regular RegExp object
Table of contents 1. RegExp object 2. Grammar 2.1...
Six important selectors in CSS (remember them in three seconds)
From: https://blog.csdn.net/qq_44761243/article/d...
Web page creation basic declaration document type description (DTD
Using CSS layout to create web pages that comply w...
Modify the default color of the input box placeholder text -webkit-input-placeholder method
HTML5 adds a native placeholder attribute for inp...
Introduction to RHCE bridging, password-free login and port number modification
Table of contents 1. Configure bridging and captu...