..." 2. Passez "navigation:function(){... } ” Ajoutez simplement un lien."/> ..." 2. Passez "navigation:function(){... } ” Ajoutez simplement un lien.">
Maison >interface Web >Voir.js >Comment ajouter un lien dans vuejs
Comment ajouter des liens dans vuejs : 1. Créez le code html "296f14da14e23dd059a18d765ad44244...929d1f5ca49e04fdcb27f9465b944689" 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?'curr':''"><a :href="link">{{ name+'--'+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!