This article has shared the specific code of vue implementation classic tab for your reference. The specific content is as follows
Tab Method:1. vue method tab 2. The performance of event delegate method is good
2 classic tab ideas:
1.3 li controls 1 div. Each click on li controls the content in the div to change.
2.3 li controls 3 divs to show hidden`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.tabBox{
box-sizing:border-box;
/* Any margins and borders specified by the element will be drawn within the set width and height. The width and height of the content can be obtained by subtracting the border and inner margins from the set width and height respectively; */
margin:20px auto;
/* The upper and lower margins are 20px, and the left and right are automatically displayed, and they are also centered. */
width:600px;
}
.tabBox .tab{
display: flex;
position:relative;
top:1px;
}
.tabBox .tab li{
list-style:none;
margin-right:10px;
padding:0 20px;
line-height:35px;
border:1px solid #AAA;
background: #EEE;
cursor:pointer;
}
.tabBox .tab {
background: #FFF;
border-bottom-color:#FFF;
}
.tabBox .content{
/* display:none; */
height:300px;
border:1px solid lightblue;
padding:10px;
}
/* .tabBox .{
display:block;
}
*/
</style>
</head>
<body>
<!--
Tab Methods：
1. vueMethods Tab
2. Event delegate method performance is better
2Big classic tab ideas：
1.3indivuallicontrol1indivualdiv，Every clickli都controldivThe content inside has changed
2.3indivuallicontrol3indivualdivShow Hide
-->
<div >
<div class="tabBox">
<!-- Obtain the event source，Determine the source of the event，Event delegate bound toliParent element -->
<ul class="tab" >
<!-- @click='handle($event)' -->
<li v-for='(item,index) in tob ' v-html='' :class="{active:index===curIndex}" @click='handle($event,index,)'></li>
<!-- @click='curIndex=index' </li>
<li>Custom Method:index='index'</li>
<li>Documentary</li> -->
</ul>
<div class="content" v-html='content'></div>
<!-- v-for='(item,index) in tob' v-html='' :class="{content:true,active:index===curIndex}" -->
<!-- <div class="content">Anime content</div>
<div class="content">Documentary内容</div> -->
</div>
</div>
</body>
<script src="node_modules/vue/dist/"></script>
<script src="node_modules/axios/dist/"></script>
<script>
let tob =[{
id:1,
name:'music',
},
{
id:2,
name:'Movies and TV',
},{
id:3,
name:'cartoon',
},{
id:4,
name:'Documentary',
}];
let vm = new Vue({
el:'#app',
data:{
//=>Tab Data tob tob,
//Display tab index curIndex:0,
//Content area content:'',
},
cearted(){
//Life cycle function (vue instance is successfully created) (tob[]['id']);
},
methods:{
//Ev pass event delegation method // handle(ev){
// let target = ,
// tarTag = ;
// if (tarTag === 'LI'){
// = parseInt(('index'));
// }
// },
queryDATA(curID){
// Asynchronous ajax request ('').then(response => {
return ;
}).then(result => {
let itemDATA = (item => parseInt() === parseInt(curID));
(result);
if (itemDATA) {
= ;
return;
}
return ();
}).catch(reason => {
= 'No information'
});
},
handle(ev,index,id){
if ( === index) return;
= index;
(id);
},
}
})
</script>
</html>The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.