本文实例为大家分享了vue实现经典选项卡的具体代码，供大家参考，具体内容如下
选项卡方法： 1. vue方法选项卡 2. 事件委托方法性能好点
2大经典选项卡思路：
1.3个li控制1个div，每次点击li都控制div里面的内容发生变化
2.3个li控制3个div显示隐藏`
<!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;
margin:20px auto;
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 li.active{
background: #FFF;
border-bottom-color:#FFF;
}
.tabBox .content{
height:300px;
border:1px solid lightblue;
padding:10px;
}
</style>
</head>
<body>
<!--
选项卡方法：
1. vue方法选项卡
2. 事件委托方法性能好点
2大经典选项卡思路：
1.3个li控制1个div，每次点击li都控制div里面的内容发生变化
2.3个li控制3个div显示隐藏
-->
<div id="app">
<div class="tabBox">
<!-- 获得事件源，判断事件源，事件委托绑定给li的父级元素 -->
<ul class="tab" >
<!-- @click='handle($event)' -->
<li v-for='(item,index) in tob ' v-html='item.name' :class="{active:index===curIndex}" @click='handle($event,index,item.id)'></li>
<!-- @click='curIndex=index' </li>
<li>自定义方法:index='index'</li>
<li>纪录片</li> -->
</ul>
<div class="content" v-html='content'></div>
<!-- v-for='(item,index) in tob' v-html='item.children' :class="{content:true,active:index===curIndex}" -->
<!-- <div class="content">动漫内容</div>
<div class="content">纪录片内容</div> -->
</div>
</div>
</body>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script src="node_modules/axios/dist/axios.min.js"></script>
<script>
let tob =[{
id:1,
name:'音乐',
},
{
id:2,
name:'影视',
},{
id:3,
name:'动漫',
},{
id:4,
name:'纪录片',
}];
let vm = new Vue({
el:'#app',
data:{
//=>选项卡数据 tob
tob,
//展示选项卡索引
curIndex:0,
//内容区域
content:'',
},
cearted(){
//生命周期函数（vue实例创建成功）
this.queryDATA(tob[this.curIndex]['id']);
},
methods:{
//ev传参事件委托方法
// handle(ev){
// let target = ev.target,
// tarTag = target.tagName;
// if (tarTag === 'LI'){
// this.curIndex = parseInt(target.getAttribute('index'));
// }
// },
queryDATA(curID){
// 异步ajax请求
axios.get('data.json').then(response => {
return response.data;
}).then(result => {
let itemDATA = result.find(item => parseInt(item.id) === parseInt(curID));
console.log(result);
if (itemDATA) {
this.content = itemDATA.content;
return;
}
return Promise.reject();
}).catch(reason => {
this.content = '没有信息'
});
},
handle(ev,index,id){
if (this.curIndex === index) return;
this.curIndex = index;
this.queryDATA(id);
},
}
})
</script>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
