zoukankan      html  css  js  c++  java
  • vue tab切换的几种方式

    <template>
      <div id="app">
        <ul>
          <li v-for="(tab,index) in tabs" @click="toggle(index,tab.view)" :class="{active:active==index}">
            {{tab.type}}
          </li>
        </ul>
        <!--:is实现多个组件实现同一个挂载点-->
        <component :is="currentView"></component>
      </div>
    </template>
    
    <script>
    import tab1 from './components/tabs/tab1.vue'
    import tab2 from './components/tabs/tab2.vue'
    export default {
      name: 'app',
      data(){
        return {
          active:0,
          currentView:'tab1',
          tabs:[
            {
              type:'tab1',
              view:'tab1'
            },
            {
              type:'tab2',
              view:'tab2'
            }
          ]
        }
      },
      methods:{
        toggle(i,v){
          this.active=i;
          this.currentView=v;
        }
      },
      components:{
        tab1,
        tab2
      }
    }
    </script>
  • 相关阅读:
    java嵌套循环练习
    java菜鸡循环练习
    Kruskal重构树
    狄利克雷卷积
    莫比乌斯反演
    两道趣题
    树状数组
    多重背包
    SPFA与差分约束
    快速线性筛
  • 原文地址:https://www.cnblogs.com/qlb-7/p/13071364.html
Copyright © 2011-2022 走看看