Comment utiliser vue pour implémenter des onglets et des effets de changement d'onglet-js tutoriel-php.cn

Comment utiliser vue pour implémenter des onglets et des effets de changement d'onglet

php中世界最好的语言

Libérer： 2018-06-02 10:53:35

original

3420 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser vue pour obtenir des onglets et des effets de changement d'onglet. Quelles sont les précautions pour utiliser vue pour obtenir des onglets et des effets de changement d'onglet. Voici des cas pratiques. regarde.

Je ne vais pas répéter certaines instructions ou connaissances de base dans le document Vue Puisqu'il s'agit de l'entrée au combat réel, je diviserai directement certains des effets qui doivent être obtenus dans les projets quotidiens en modules. . Si vous rencontrez des instructions pertinentes ou ne savez pas comment les utiliser, consultez la documentation vous-même, puis revenez à mon code d'implémentation. N'oubliez pas qu'il est vraiment important de lire la documentation de Vue, très important !

Vue est présenté ici sous la forme d'un fichier unique. De plus, le code sera optimisé étape par étape lors de l'implémentation, alors ne vous inquiétez pas !

Ce qui suit est un onglet avec un style un peu laid, mais la fonction est OK.

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8" />  
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">   
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width"> 
  <meta name="apple-mobile-web-app-title" content="Vue选项卡"> 
  <title>Vue实现选项卡</title> 
  <script type="text/javascript" src="../js/vue.js"></script> 
 </head> 
 <style> 
  * { 
   padding: 0; 
   margin: 0; 
  } 
  .box { 
   width: 800px; 
   height: 200px; 
   margin: 0 auto; 
   border: 1px solid #000; 
  } 
  .tabs li { 
   float: left; 
   margin-right: 8px; 
   list-style: none; 
  } 
  .tabs .tab-link { 
   display: block; 
   width: 250px; 
   height: 49px; 
   text-align: center; 
   line-height: 49px; 
   background-color: #5597B4; 
   color: #fff; 
   text-decoration: none; 
  } 
  .tabs .tab-link.active { 
   height: 47px; 
   border-bottom: 2px solid #E35885; 
   transition: .3s; 
  } 
  .cards { 
   float: left; 
  } 
  .cards .tab-card { 
   display: none; 
  } 
  .clearfix:after { 
   content: ""; 
   display: block; 
   height: 0; 
   clear: both; 
  } 
  .clearfix { 
   zoom: 1; 
  } 
 </style> 
 <body> 
  <p id="app" class="box"> 
   <ul class="tabs clearfix"> 
    <li v-for="(tab,index) in tabsName"> 
     <a href="#" rel="external nofollow" class="tab-link" @click="tabsSwitch(index)" v-bind:class="{active:tab.isActive}">{{tab.name}}</a> 
    </li> 
   </ul> 
   <p class="cards"> 
    <p class="tab-card" style="display: block;">这里是HTML教程</p> 
    <p class="tab-card">欢迎来到CSS模块</p> 
    <p class="tab-card">嗨，这里是Vue</p> 
   </p> 
  </p> 
 </body> 
 <script> 
  var app = new Vue({ 
   el: "#app", 
   data: { 
    tabsName: [{ 
     name: "HTML", 
     isActive: true 
    }, { 
     name: "CSS", 
     isActive: false 
    }, { 
     name: "Vue", 
     isActive: false 
    }], 
    active: false 
   }, 
   methods: { 
    tabsSwitch: function(tabIndex) { 
     var tabCardCollection = document.querySelectorAll(".tab-card"), 
      len = tabCardCollection.length; 
     for(var i = 0; i < len; i++) { 
      tabCardCollection[i].style.display = "none"; 
      this.tabsName[i].isActive = false; 
     } 
     this.tabsName[tabIndex].isActive = true; 
     tabCardCollection[tabIndex].style.display = "block"; 
    } 
   } 
  }) 
 </script> 
</html>

Copier après la connexion

La mise en œuvre de la première génération d'onglets débutera ainsi, et sera améliorée par la suite. Ce qui précède est le code, et ce qui suit est le rendu ! Je viens de commencer à apprendre Vue et j'ai réalisé quelques projets, si vous avez des questions, nous pouvons en discuter ensemble et progresser ensemble. Bienvenue pour m'envoyer un message privé !

Vue implémente le changement d'onglet. Le code spécifique est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>选项卡</title>
 <script src="../js/vue.js"></script>
 <style>
  li{
   list-style: none;
   float: left;
   margin-right: 20px;
  }
 </style>
</head>
<body>
 <p class="app">
  <ul>
   <li v-for="(item,index) in list" @click="tab(index)">{{item.tab}}
    <p v-show="item.show">
     {{item.title}}
    </p>
   </li>
  </ul>
 </p>
 <script>
  let obj=[
   {"tab":"选项一","show":true,"title":"1111"},
   {"tab":"选项二","show":false,"title":"2222"},
   {"tab":"选项三","show":false,"title":"3333"}
  ];
  var vm=new Vue({
   el:".app",
   data:{
    list:obj
   },
   methods:{
    tab:function(index){
     for(var i=0;i<this.list.length;i++){
      this.list[i].show=false;
      if(i==index){
       this.list[index].show=true;
      }
     }
    }
   }
  })
 </script>
</body>
</html>

Copier après la connexion

Croyez-le. ou pas Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Comment réaliser le développement international de vue-i18n et element-ui dans le projet vue

Comment utiliser vue implémente l'optimisation des performances de vérification SMS

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!