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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue實現(xiàn)表單數(shù)據(jù)的增刪改功能
這篇文章主要為大家詳細介紹了vue實現(xiàn)表單數(shù)據(jù)的增刪改功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03啟動myvue報錯npm?ERR!?code?ENOENT?npm?ERR!?syscall?open的解
這篇文章主要介紹了啟動myvue報錯npm?ERR!?code?ENOENT?npm?ERR!?syscall?open的解決辦法,文中給出了詳細的解決方法,并通過圖文結(jié)合的方式介紹的非常詳細,需要的朋友可以參考下2024-03-03element-plus 下拉框?qū)崿F(xiàn)全選的示例代碼
本文主要介紹了element-plus 下拉框?qū)崿F(xiàn)全選的示例代碼,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-05-05el-table多選toggleRowSelection不生效解決方案
這篇文章主要給大家介紹了關(guān)于el-table多選toggleRowSelection不生效的解決方案,文中通過圖文以及代碼將解決辦法介紹的非常詳細,需要的朋友可以參考下2023-08-08Vue實現(xiàn)點擊導(dǎo)航欄當前標簽后變色功能
這篇文章主要為大家詳細介紹了Vue實現(xiàn)點擊導(dǎo)航欄當前標簽后變色功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-08-08Vue3使用setup監(jiān)聽props實現(xiàn)方法詳解
這篇文章主要為大家介紹了Vue3使用setup監(jiān)聽props實現(xiàn)方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08詳解實現(xiàn)vue的數(shù)據(jù)響應(yīng)式原理
這篇文章主要介紹了詳解實現(xiàn)vue的數(shù)據(jù)響應(yīng)式原理,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01