suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Vue-Implementierung von Registerkarten und Umschaltfunktionen

Detaillierte Erläuterung der Vue-Implementierung von Registerkarten und Umschaltfunktionen

php中世界最好的语言
php中世界最好的语言Original
2018-04-27 09:36:064687Durchsuche

Dieses Mal werde ich Ihnen detailliert erklären, wie Sie Tabs und Umschaltfunktionen in Vue implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung von Tabs und Umschaltfunktionen in Vue? ein Blick.

Ich werde einige Anweisungen zur Verwendung oder Grundkenntnisse im Vue-Dokument nicht wiederholen, da es vom Einstieg bis zum tatsächlichen Kampf geht, werde ich einige der Effekte, die in täglichen Projekten erzielt werden müssen, direkt in Module aufteilen . Wenn Sie auf relevante Anweisungen stoßen oder nicht wissen, wie Sie diese verwenden, überprüfen Sie selbst die Dokumentation und schauen Sie sich dann noch einmal meinen Implementierungscode an. Denken Sie daran, es ist wirklich wichtig, die Vue-Dokumentation durchzulesen, sehr wichtig!

Vue wird hier in Form einer einzelnen Datei eingeführt. Außerdem wird der Code bei der Implementierung Schritt für Schritt optimiert, also keine Sorge!

Das Folgende ist eine Registerkarte mit einem etwas hässlichen Stil, aber die Funktion ist in Ordnung. 

<!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>
Die Implementierung der ersten Tab-Generation beginnt so und wird später verbessert. Das Obige ist der Code und das Folgende ist das Rendering! Ich habe gerade mit dem Erlernen von Vue begonnen und einige Projekte durchgeführt. Wenn Sie Fragen haben, können wir diese gemeinsam besprechen und mir gerne eine private Nachricht senden.

Vue implementiert den Tab-Wechsel. Der spezifische Code lautet wie folgt: 

<!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>
Ich glaube, das haben Sie Lesen Sie diesen Artikel. Sie beherrschen die Fallmethode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von $refs in Vue

Zusammenfassung der asynchronen Lademethode von Vue +Webpack

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Vue-Implementierung von Registerkarten und Umschaltfunktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php webpack 异步
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erklärung der Verwendung von $refs in VueNächster Artikel：Detaillierte Erklärung der Verwendung von $refs in Vue

In Verbindung stehende Artikel

Mehr sehen