vue实现经典选项卡功能

2024-04-02 19:04:59 163人浏览独家记忆

摘要

本文实例为大家分享了Vue实现经典选项卡的具体代码，供大家参考，具体内容如下选项卡方法： 1. vue方法选项卡 2. 事件委托方法性能好点 2大经典选项卡思路： 1.3个li控制

本文实例为大家分享了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;
          
          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{
          
          height:300px;
          border:1px solid lightblue;
          padding:10px;
      }
       
    </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>