vuejs——tab选项卡的简单实现

vuejs利用动态组件实现简单的tab选项卡 (1.0版本)

最近也在学习vuejs,并且手上一个项目也用到了这个框架,今天介绍一个简单实现tabs选项卡切换的方法。

1. 嵌套路由实现

    
child1 tab
    
child2 tab
    

这个不是今天要重点记录的,略过啦-,-

2. 利用vuejs的动态组件实现,官网介绍 http://vuejs.org.cn/guide/components.html#动态组件

html:


  

    
{{ tab.type }}
  
  

  


script:

Vue.component("child1", {
    template: '
hell child1
'
})
Vue.component("child2", {
    template: '
hell child2
'
})
new Vue({
  el: '#root',
  data: {
        currentView: 'child1',
    active: 0,
    tabs: [
        {
        type: 'child1 tab',
        view: 'child1'
      },{
        type: 'child2 tab',
        view: 'child2'
      }
    ]
    },
  methods: {
    toggle(i,v) {
      this.active = i
      this.currentView = v
    }
  }

  css:
  .active {
    color: red;
    border-bottom: 1px solid red;
  }
  ul li {
    padding: 0 15px;
    float:left;
    list-style: none;
  }

在线预览: https://jsfiddle.net/2kn4hqts/

Good night !