zoukankan      html  css  js  c++  java
  • Vue之tab简单切换实现

    简单实现过程:

    通过v-for实现tab页签,通过@click实现页签切换,通过:class实现绑定当前页,tab切换主要依靠组件component实现,每个页签切换时,不想让改变页签内容,可以用keep-alive实现。具体代码如下:

    <template>  
      <div id="app">  
        <div class="radio-wrap">  
          <div class="radio-group" v-model="tabView">   
            <span 
               v-for="(tab ,index) in tabs" 
               :class="{cur:iscur==index}" 
               @click="iscur=index,tabChange('select' + (index + 1))">
                 {{tab.name}}
            </span>  
          </div>  
          <div style="margin:10px 0;"></div>  
          <keep-alive>   
            <component v-bind:is="tabView"></component>  
          </keep-alive>   
        </div>  
      </div>  
    </template>  
      
    <script>  
      import select1 from './components/select01.vue';  
      import select2 from './components/select02.vue';  
      import select3 from './components/select03.vue';  
      export default {  
        name: 'app',  
          data () {  
            return {  
              tabView: 'select1',
              iscur: 0,   
              tabs: [{name: "选项一"}, {name: "选项二"} ,{name: "选项三"}]
            }  
      },  
      components: {  
        select1,  
        select2,  
        select3  
      },  
      methods: {  
        tabChange:function(tab){  
          this.tabView = tab;  
        }  
      }  
    }  
    </script>  
    

      

  • 相关阅读:
    C#连接db2数据库
    SSIS 查找 组件
    Winfrom控件 特效
    Highcharts中文帮助文档
    winform常用控件介绍
    Sql 语句常语法
    SQL经典语句大全
    SharePoint资料
    wcf编程资料
    CrystalDecisions.Windows.Forms文件
  • 原文地址:https://www.cnblogs.com/Cola886/p/11805136.html
Copyright © 2011-2022 走看看