vue實現(xiàn)經(jīng)典選項卡功能

更新時間：2022年03月02日 11:09:31 作者：公子清

這篇文章主要為大家詳細介紹了vue實現(xiàn)經(jīng)典選項卡功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)經(jīng)典選項卡的具體代碼，供大家參考，具體內(nèi)容如下

選項卡方法： 1. vue方法選項卡 2. 事件委托方法性能好點

2大經(jīng)典選項卡思路：

1.3個li控制1個div，每次點擊li都控制div里面的內(nèi)容發(fā)生變化
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;?
? ? ? ? ?/* ?元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度; */
? ? ? ? ? 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大經(jīng)典選項卡思路：
? ? ? ? 1.3個li控制1個div，每次點擊li都控制div里面的內(nèi)容發(fā)生變化
? ? ? ? 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">動漫內(nèi)容</div>
? ? ? ? ? ? ? ? <div class="content">紀錄片內(nèi)容</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:{
? ? ? ? ? ? ? ? ? ? //=>選項卡數(shù)據(jù) tob
? ? ? ? ? ? ? ? ? ? tob,
? ? ? ? ? ? ? ? ? ? //展示選項卡索引
? ? ? ? ? ? ? ? ? ? curIndex:0,
? ? ? ? ? ? ? ? ? ? //內(nèi)容區(qū)域
? ? ? ? ? ? ? ? ? ? content:'',
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? cearted(){
? ? ? ? ? ? ? ? ? ? ? //生命周期函數(shù)（vue實例創(chuàng)建成功）
? ? ? ? ? ? ? ? ? ? ? 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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: