vue.cli實現tab切換效果

<template>

<div class="cp-select">

                    <div class="leftSelect" :class="{'z-active':stlle==first}"

@click="toggleTabs(first)">

                     <p>詳情分析</p>

                    </div>

                    <div class="rightSelect" :class="{'z-active':stlle==second}"

@click="toggleTabs(second)">

                         <p>走勢分析</p>

                        <div class="newTip"></div>

                    </div>

                </div>

                <prince :is="currentView" keep-alive></prince>

</template>

 

<script type="text/ecmascript-6">

  import first from '../../../components/first'; 引入兩個子文件first和second

import second from '../../../components/second';

export default {

data () {

return {

         first: "first", //導航欄文本1

second: "second",

        currentView: 'first',默認顯示頁面為first子頁面

        stlle:'first' 默認樣式為first

         }

         },

mounted() {

 

    },

    components: {

first,

second,

},

methods: {

toggleTabs (tabText) {

                 this.currentView = tabText;

                 this.stlle=tabText;

             }

         },

}

 

</script>

 

這個是自己寫的tab切換頁，里面包含了css樣式的切換，另外vue的tab切換可以參考的的有：

http://www.jb51.net/article/122451.htm   

還有個博客寫的也比較清楚：

http://www.cnblogs.com/pearl07/p/7053028.html 

http://www.cnblogs.com/wrcold520/p/5531960.html 

這三個方法都是一樣的。只是沒有給出切換的樣式。
在另外幾個網址上有關於樣式的切換：

1，https://segmentfault.com/q/1010000007627274/a-1020000008460976
2，http://blog.csdn.net/wxl1555/article/details/76727426

 

 

最終的頁面效果如下：