vue實(shí)現(xiàn)經(jīng)典選項(xiàng)卡功能
本文實(shí)例為大家分享了vue實(shí)現(xiàn)經(jīng)典選項(xiàng)卡的具體代碼,供大家參考,具體內(nèi)容如下
選項(xiàng)卡方法: 1. vue方法選項(xiàng)卡 2. 事件委托方法性能好點(diǎn)
2大經(jīng)典選項(xiàng)卡思路:
1.3個(gè)li控制1個(gè)div,每次點(diǎn)擊li都控制div里面的內(nèi)容發(fā)生變化
2.3個(gè)li控制3個(gè)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)進(jìn)行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度; */ ? ? ? ? ? margin:20px auto; ? ? ? ? ? /* 上下邊距為 20px ,左右 自動(dòng),也是居中顯示。 */ ? ? ? ? ? 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> ? ? <!--? ? ? ? ? 選項(xiàng)卡方法: ? ? ? ?1. vue方法選項(xiàng)卡 ? ? ? ?2. 事件委托方法性能好點(diǎn) ? ? ? ? 2大經(jīng)典選項(xiàng)卡思路: ? ? ? ? 1.3個(gè)li控制1個(gè)div,每次點(diǎn)擊li都控制div里面的內(nèi)容發(fā)生變化 ? ? ? ? 2.3個(gè)li控制3個(gè)div顯示隱藏 ? ? --> ? ? <div id="app"> ? ? ? ? <div class="tabBox"> ? ? ? ? ? ? <!-- 獲得事件源,判斷事件源,事件委托綁定給li的父級(jí)元素 --> ? ? ? ? ? ? ? ? <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>紀(jì)錄片</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">動(dòng)漫內(nèi)容</div> ? ? ? ? ? ? ? ? <div class="content">紀(jì)錄片內(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:'動(dòng)漫', ? ? ? ? ? ? ? ? ? ? ? ? },{ ? ? ? ? ? ? ? id:4, ? ? ? ? ? ? ? name:'紀(jì)錄片', ? ? ? ? ? ? ? ? ? ? ? ? }]; ? ? ? ? ? ? let vm = new Vue({ ? ? ? ? ? ? ? ? el:'#app', ? ? ? ? ? ? ? ? data:{ ? ? ? ? ? ? ? ? ? ? //=>選項(xiàng)卡數(shù)據(jù) tob ? ? ? ? ? ? ? ? ? ? tob, ? ? ? ? ? ? ? ? ? ? //展示選項(xiàng)卡索引 ? ? ? ? ? ? ? ? ? ? curIndex:0, ? ? ? ? ? ? ? ? ? ? //內(nèi)容區(qū)域 ? ? ? ? ? ? ? ? ? ? content:'', ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? cearted(){ ? ? ? ? ? ? ? ? ? ? ? //生命周期函數(shù)(vue實(shí)例創(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請(qǐng)求 ? ? ? ? ? ? ? ? ? ? ? ? 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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue實(shí)現(xiàn)選項(xiàng)卡及選項(xiàng)卡切換效果
- 使用vue.js寫一個(gè)tab選項(xiàng)卡效果
- Vue.js組件tabs實(shí)現(xiàn)選項(xiàng)卡切換效果
- vue插件tab選項(xiàng)卡使用小結(jié)
- Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換
- vue中選項(xiàng)卡點(diǎn)擊切換且能滑動(dòng)切換功能的實(shí)現(xiàn)代碼
- vuejs實(shí)現(xiàn)標(biāo)簽選項(xiàng)卡動(dòng)態(tài)更改css樣式的方法
- Vue.js tab實(shí)現(xiàn)選項(xiàng)卡切換
- vue動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果
- vue中用動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果
相關(guān)文章
vue處理get/post的http請(qǐng)求的實(shí)例
本文主要介紹了vue處理get/post的http請(qǐng)求的實(shí)例,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03vue實(shí)現(xiàn)表單數(shù)據(jù)的增刪改功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表單數(shù)據(jù)的增刪改功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03啟動(dòng)myvue報(bào)錯(cuò)npm?ERR!?code?ENOENT?npm?ERR!?syscall?open的解
這篇文章主要介紹了啟動(dòng)myvue報(bào)錯(cuò)npm?ERR!?code?ENOENT?npm?ERR!?syscall?open的解決辦法,文中給出了詳細(xì)的解決方法,并通過圖文結(jié)合的方式介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03element-plus 下拉框?qū)崿F(xiàn)全選的示例代碼
本文主要介紹了element-plus 下拉框?qū)崿F(xiàn)全選的示例代碼,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05el-table多選toggleRowSelection不生效解決方案
這篇文章主要給大家介紹了關(guān)于el-table多選toggleRowSelection不生效的解決方案,文中通過圖文以及代碼將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08Vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄當(dāng)前標(biāo)簽后變色功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄當(dāng)前標(biāo)簽后變色功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08Vue3使用setup監(jiān)聽props實(shí)現(xiàn)方法詳解
這篇文章主要為大家介紹了Vue3使用setup監(jiān)聽props實(shí)現(xiàn)方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08vue配置請(qǐng)求本地json數(shù)據(jù)的方法
這篇文章主要介紹了vue配置請(qǐng)求本地json數(shù)據(jù)的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04詳解實(shí)現(xiàn)vue的數(shù)據(jù)響應(yīng)式原理
這篇文章主要介紹了詳解實(shí)現(xiàn)vue的數(shù)據(jù)響應(yīng)式原理,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01