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
Install MySQL in Ubuntu 18.04 (Graphical Tutorial)
Tip: The following operations are all performed u...
Detailed explanation of several horizontal and vertical centering methods in HTML (Basics)
Preface When we were writing the horse, I guess e...
An article to help you understand jQuery animation
Table of contents 1. Control the display and hidi...
A brief analysis of the count tracking of a request in nginx
First, let me explain the application method. The...
Using Vue3 (Part 1) Creating a Vue CLI Project
Table of contents 1. Official Documentation 2. Cr...
How to install MySQL 8.0.17 and configure remote access
1. Preparation before installation Check the data...
33 of the best free English fonts shared
ChunkFive Free Typefamily Cuprum JAH I Free font Y...
Docker Gitlab+Jenkins+Harbor builds a persistent platform operation
CI/CD Overview CI workflow design Git code versio...
Vue echarts realizes horizontal bar chart
This article shares the specific code of vue echa...
Explanation of MySQL index types Normal, Unique and Full Text
MySQL's index types include normal index, uni...
Linux kernel device driver kernel time management notes
/****************** * Linux kernel time managemen...
The effect of zooming in on a Taobao store is similar to the principle of using a slideshow.
Today I got familiar with the mouse zooming effect...
Implementation example of react project from new creation to deployment
Start a new project This article mainly records t...
Mysql index types and basic usage examples
Table of contents index - General index - Unique ...
HTML code that can make IE freeze
We simply need to open any text editor, copy the f...