Comment ajouter un lien dans vuejs

Comment ajouter des liens dans vuejs : 1. Créez le code html "

...

" 2. Passez "navigation:function( ) {...}" ajoutez simplement un lien.

L'environnement d'exploitation de cet article : système Windows 7, Vue2.9.6, ordinateur Dell G3.

Comment ajouter un lien dans vuejs ?

Méthode vue.js pour ajouter un lien :

le code js est :

navigation:function(){
            new Vue({
                el: '#navUl',
                data: {
                    menuData:{
                        '个人首页':'personal-home.html',
                        '人才分析':'personal-analysis.html',
                        '基本信息':'personal-info-base.html',
                        '技能态度':'skill-attitude.html',
                        '参与项目':'involved-project.html',
                        '学习':'learn.html',
                        '考勤':'work-attend.html',
                        '生活福利':'welfare.html'
                    }
                },
                computed:{
                    curIdx:function(){
                        var curIdx = 0;
                        $.each(this.menuData,function(k,v){
                            if(location.pathname.indexOf(v)!=-1){//说明包括（也就是当前页面）
                                return false;
                            }else{//==-1说明不包括（不是当前页面）
                                curIdx++;
                            }
                        });
                        console.log(curIdx);
                        return curIdx;
                    }
                }
            });
        }

le code html est :

<ul class="nav-ul" id="navUl">
          <template v-for="(link,name,index) in menuData">
          <li class="nav-li" v-bind:class="index==curIdx?&#39;curr&#39;:&#39;&#39;"><a :href="link">{{ name+&#39;--&#39;+index }}</a></li>
           </template>
</ul>

Explication : L'idée est que chaque page correspond à une valeur d'Index, par exemple : lors du passage à la page d'informations de base, index=2 A ce moment, si curIdx est également égal à 2, alors index==curIdx, ajoutez la classe curr, le texte devient rouge, et le saut de page est ajouté au texte. Les liens ne sont pas provoqués par des événements de clic ;

Donc, lors du passage à la page d'accueil personnelle, curIdx==0 lors du passage à la page d'analyse des talents, curIdx==1 ; page d'informations, curIdx==2; et ainsi de suite ;

Pour la page d'informations de base : dans le fichier js, bouclez this.menuData. Premièrement, le lien actuel n'inclut pas le contenu du premier lien personal-home.html, donc location.pathname.indexOf(v)==-1, à ce moment curIdx Augmenter de 0 à 1 ;

Puis boucler pour la deuxième fois, le lien actuel n'inclut pas le contenu du deuxième lien personal-analysis.html , donc location.pathname.indexOf(v)==-1, à ce moment curIdx augmente de 1 à 2 ;

Ensuite, la troisième boucle, le lien actuel inclut le contenu du troisième lien personal-info-base.html, donc location.pathname.indexOf(v)!=-1, à ce moment, false est renvoyé, curIdx= =2;

C'est-à-dire que le curIdx de la page d'informations de base est 2 à ce moment, index= ; =curIdx, ajoutez le nom de la classe curr pour l'heure actuelle ;

Recommandé : "tutoriel vue"

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!