本文实例为大家分享了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;
/* 上下边距为 20px ，左右 自动，也是居中显示。 */
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{
/* display:none; */
height:300px;
border:1px solid lightblue;
padding:10px;
}
/* .tabBox .content.active{
display:block;
}
*/
</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="https://www.atool.online/article/node_modules/vue/dist/vue.min.js"></script>
<script src="https://www.atool.online/article/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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持阿兔在线工具。
