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
Solution to failure in connecting to mysql in docker
Scenario: After installing the latest version of ...
Pure JavaScript to implement the number guessing game
Develop a number guessing game that randomly sele...
The process of deploying a project to another host using Jenkins
environment Hostname ip address Serve Jenkins 192...
Do you know how to optimize loading web fonts?
Just as the title! The commonly used font-family l...
17 404 Pages You'll Want to Experience
How can we say that we should avoid 404? The reas...
Detailed explanation of MySQL master-slave replication and read-write separation
Table of contents Preface 1. Overview 2. Read-wri...
Detailed explanation of JavaScript to monitor route changes
Table of contents history pushState() Method push...
JavaScript DOMContentLoaded event case study
DOMContentLoaded Event Literally, it fires after ...
Detailed explanation of MySQL cursor concepts and usage
This article uses examples to explain the concept...
Nginx rtmp module compilation arm version problem
Table of contents 1. Preparation: 2. Source code ...
Implementation of Docker deployment of Tomcat and Web applications
1. Download docker online yum install -y epel-rel...
MySQL 8.0.12 decompression version installation tutorial personal test!
Mysql8.0.12 decompression version installation me...
How to use nginx to build a static resource server
Taking Windows as an example, Linux is actually t...
MySQL 5.7.18 installation tutorial under Windows
This article explains how to install MySQL from a...
How to set up swap partition SWAP in Linux 7.7
The Swap partition of the Linux system, that is, ...