效果图:
代码如下:
代码如下 | 复制代码 |
*{padding: 0;margin: 0} #app{ width: 500px;height: 300px;margin: 0 auto;background-color: #ddd; } .top{ height: 50px;line-height: 50px;width: 100%;background-color: #999; } .top ul li{display: inline-block;margin:0 10px;} .top ul li a{text-decoration: none;color: white;} .bottom{
}
var tab01 = Vue.extend({ template:' This is tab01 '}) var tab02 = Vue.extend({ template:' This is tab02 '}) var tab03 = Vue.extend({ template:' This is tab03 '}) var app = new Vue({ el:'#app', data:{ tab01Text:'tab01', tab02Text:'tab02', tab03Text:'tab03', currentView:'tab01' }, components:{ tab01:tab01, tab02:tab02, tab03:tab03 }, methods:{ tabToggle:function(tabText){ this.currentView=tabText } } })
|