ホームページ > 記事 > ウェブフロントエンド > Vue2タブでタブを切り替える方法

Vue2タブでタブを切り替える方法

php中世界最好的语言オリジナル: 2018-03-10 13:53:123148ブラウズ

今回は、Vue2 タブでタブを切り替える方法について説明します。Vue2 タブを使用してタブを切り替えるときの注意点は何ですか?実際のケースを見てみましょう。

私は最近 Vue を学習しています。事例を見た後、この種のシンプルで効果的な効果のほうが受け入れられやすいです。

<!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 を使用して簡素化されています。

ポイント 1: v-for value-key の走査順序を忘れないでください。

ポイント 2: グローバル API について Vue.set( ); use; は、change メソッドのループの後で呼び出す必要があります

ここで使用されるちょっとしたトリックは、アクティブ状態の値を更新する方法です。変更後、

その後ろに項目を追加します。この項目には意味はありませんが、$set メソッドを呼び出して Vue に知らせるだけです

ポイント 3: コンポーネントの参照方法: 関数に送信します。 v-for によってトラバースされる属性 ;これは便利です;

実際には、com1 com2 com3 を格納するためにデータの下に別の変数を書き込んでも効果はありません;

この記事の事例を読んだ後は、この方法を習得したと思います。興味深い情報ですので、他の php 中国語 Web サイト関連記事にもご注目ください。