suchen

Heim >Web-Frontend >js-Tutorial >Vue ermöglicht den Tab-Wechsel

Vue ermöglicht den Tab-Wechsel

php中世界最好的语言
php中世界最好的语言Original
2018-06-06 11:32:432661Durchsuche

Dieses Mal werde ich Ihnen Vue zum Tab-Wechsel vorstellen. Welche Vorsichtsmaßnahmen gibt es für Vue, um den Tab-Wechsel durchzuführen? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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:

Wie man das Vue-Projekt international entwickelt

Wie man Vue+Webpack verwendet, um asynchrones Laden durchzuführen

Das obige ist der detaillierte Inhalt vonVue ermöglicht den Tab-Wechsel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：So implementieren Sie die WebSocket-Funktion mit NodeJSNächster Artikel：So implementieren Sie die WebSocket-Funktion mit NodeJS

In Verbindung stehende Artikel

Mehr sehen