Maison > Article > interface Web > Comment changer d'onglet dans l'onglet Vue2

Comment changer d'onglet dans l'onglet Vue2

php中世界最好的语言original: 2018-03-10 13:53:123140parcourir

Cette fois, je vais vous expliquer comment changer d'onglet avec l'onglet Vue2. Quelles sont les précautions lors de l'utilisation de l'onglet Vue2 pour changer d'onglet. Voici un cas pratique, jetons un coup d'œil.

J'ai appris Vue récemment. Après avoir lu le cas, je ferai une pratique pour approfondir ma compréhension. Ce genre d'effet simple et efficace est plus acceptable ;

html : La structure est très simple :

<!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>

code 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>

J'ai aussi fait un exemple avant, le code est brouillon, c'est simplifié en utilisant v-for;

Un des points clés : N'oubliez pas l'ordre de parcours de v-for value-key ;

Point 2 : À propos de l'utilisation de l'API globale Vue.set();; avec this.$set après la boucle dans la méthode de changement;

Une petite astuce utilisée ici est de savoir comment mettre à jour la valeur de l'état actif après son changement

Ajoutez un élément après celui-ci. Cet élément n'a aucune signification, mais n'est qu'un appel. La méthode $set informe Vue ;

Point 3 : Comment référencer le composant est :who; c'est pratique ;

En fait, écrire une autre variable sous data pour stocker com1 com2 com3 ne prendra pas effet ;

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour plus d'informations intéressantes, veuillez prêter attention aux autres sites Web chinois php.

Lecture connexe :

Comment résoudre le piratage CSS de IE11

VUE Comment utiliser anmate.css3

Comment axios crée un client de requête HTTP basé sur Promise

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'enregistrement des composants Vue 2.0Article suivant：Explication détaillée de l'enregistrement des composants Vue 2.0

Articles Liés

Voir plus