首頁 >web前端 >js教程 >Vue2 tab切換選項卡的方法

Vue2 tab切換選項卡的方法

php中世界最好的语言原創: 2018-03-10 13:53:123212瀏覽

這次帶給大家Vue2 tab切換選項卡的方法，使用Vue2 tab切換選項卡的注意事項有哪些，以下就是實戰案例，一起來看一下。

最近在學習Vue,看是案例後隨便做一個實踐,一遍加深理解;這種簡單又能實現效果的比較能夠接受;

html:結構很簡單:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>components</title>
    <script src="vue.js"></script>
    <style type="text/css">
        span{
            background:#ccc;
            padding:2px 5px;
            line-height:30px;
            text-align:center;
            cursor:pointer;
        }
        span.active{
            color:#fff;
            background:green;
        }
    </style>
</head>
<body>
    <div id="app">
        <component :is="who"></component>
        <span   :class="{active:active[key]}"   v-for="(item,key) in tab" @click="change(key)">{{item.content}} :{{key}}</span>
    </div>
</body>
</html>

js程式碼:

<script type="text/javascript">
    var tem1 = {
        template: "<div>我是components_A组件</div>",
    };
    var tem2 = {
        template: "<div>我是components_B组件</div>",
    };
    var tem3 = {
        template: "<div>我是components_C组件</div>",
    };
    var vue1 = new Vue({
        el: "#app",
        data: {
            who: "com1",　　　　　　　　　　//默认第一次显示;
            active: [true, false, false],//统一管理状态;
            tab: [{
                "content": "tab1",　　　　//tab-span
                "func": "com1"           //仅仅用来存放组件;
            }, {
                "content": "tab2",
                "func": "com2"
            }, {
                "content": "tab3",
                "func": "com3"
            }]
        },
        updated: function() {
            // this.who=null;
        },
        methods: {
            change:function(x){
                
                for(var i=0;i<this.active.length;i++){
                    this.active[i]=false;
                    this.active[x]=true;
                    this.who=this.tab[x].func;
                }
                console.log(this.active);
                // console.log(x);
                this.$set(this.active, 3, 0);
            }
        },
        components: {
            "com1": tem1,
            "com2": tem2,
            "com3": tem3
        }
    })</script>

之前也是做了一個範例程式碼比較凌亂,這個用v-for做簡化了;

要點之一: 不要忘記v -for的遍歷順序值-鍵;

要點之二: 關於全域API Vue.set();的使用; 應該在change方法中的循環之後用this.$set呼叫;

#　　　　這裡使用了一個小技巧就是關於active狀態的值在改變後如何更新呢,

　　　　在其中後面加入一項,這一項並沒有什麼意義,僅僅是調用$set方法讓Vue知道;

要點之三: 關於component元件is:who 如何引用到呢;把它發到被v-for遍歷的一個func屬性中;這樣就方便了;

#事實上在data下再寫一個變數來存放com1 com2 com3 是不會生效的;

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！