html 代码
- <template>
- <div class="top">
- <ul>
- <li><a href="javascript:;" @click='tabToggle(tab01Text);'>{{tab01Text}}</a></li>
- <li><a href="javascript:;" @click='tabToggle(tab02Text);'>{{tab02Text}}</a></li>
- <li><a href="javascript:;" @click='tabToggle(tab03Text);'>{{tab03Text}}</a></li>
- </ul>
- </div>
- <div class="bottom">
- <component :is='currentView' keep-alive></component>
- </div>
- </template>
- <script type="text/javascript">
- import vue from 'vue'
- var tab01 = Vue.extend({
- template:'<p>This is tab01</p>'
- })
- var tab02 = Vue.extend({
- template:'<p>This is tab02</p>'
- })
- var tab03 = Vue.extend({
- template:'<p>This is tab03</p>'
- })
- export default {
- data () {
- return {
- tab01Text:'tab01',
- tab02Text:'tab02',
- tab03Text:'tab03',
- currentView:'tab01'
- }
- },
- components:{
- tab01:tab01,
- tab02:tab02,
- tab03:tab03
- },
- methods:{
- tabToggle:function(tabText){
- this.currentView=tabText
- }
- },
- }
- </script>
- <style type="text/CSS">
- .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;}
- </style>
ps: 效果是网上查找来的, 在这里给一个记录, 原创网址忘了...
来源: http://www.qdfuns.com/article/32451/ab27c96b0b3978d4298cf080b1dd1a87.html