Vue页面内tab切换效果

<template>

        // 每一个 tab 绑定了一个点击事件，传入的参数对应着 tab 下的组件名以及其下标用来判断是否增加class属性

     <div>
       <div v-for="(item,index) in tabs">
         <div class="tabs"  @click="toggleTab(item.taburl,index)" :class="{active:index == num}">
               {{item.tabname}}
          </div>
       </div>
     </div>

 

     // 子组件，显示不同的 tab

     // is 特性动态绑定子组件

    // keep-alive 将切换出去的组件保留在内存中

     <prince :is="currentTab" keep-alive></prince>

</template>

<script>

// 引入子组件路径

    import tab1  from './components/tab1';

    import tab2 from './components/tab2';

    import tab3 from './components/tab3';

    import tab4 from './components/tab4';

    export default {

         name: 'app',

         data () {

                 return {

                     // currentTab 用于标识当前触发的子组件默认tab1

                     currentTab: 'tab1',    

          tabs: [
            {
              tabname: 'tab1标题',
              taburl: 'tab1  '
            },
            {
              tabname: 'tab2标题',
              taburl: 'tab2'
            },
            {
              tabname: 'tab3标题',
              taburl: 'tab3'
            },
            {
              tabname: 'tab4标题',
              taburl: 'tab4'
            }
          ]

                 };

          },

          components: {

                 // 声明子组件

                 tab1,

                 tab2,

                 tab3,

                 tab4

           },

            methods: {

                 toggleTab: function(tab,index) {

                      // tab 为当前触发标签页的组件名;index为点击tab的下标

                     this.currentTab = tab;

                     this.num = index           

                }

             }

        }

</script>

<style>

    .tabs.active{

              background:#c3c3c3;

      }

</style>

原作者：我不是黄悠然

原链接：https://www.jianshu.com/p/ba7d63def361
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

修改者：Ccc_D

原作者不是用循环创建tab栏，修改为循环生成tab栏以及增加class属性