vue實現經典索引標籤功能

2022-03-02 13:00:59
本文範例為大家分享了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="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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。
vue實現經典索引標籤功能

熱門文章
