suchen

Heim >Web-Frontend >js-Tutorial >Vue implementiert die Tab-Umschalt- und Stilumschaltmethode

Vue implementiert die Tab-Umschalt- und Stilumschaltmethode

亚连
亚连Original
2018-05-29 17:58:213699Durchsuche

Im Folgenden werde ich einen Artikel über die Implementierung des Tab-Wechsels und des Stil-Wechsels in Vue veröffentlichen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Das Beispiel ist wie folgt: 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  * {
   margin: 0;
   padding: 0;
   list-style: none
  }
  #app {
   width: 504px;
   height: 300px;
   margin: 100px auto;
   border: 1px solid #000;
  }
  ul {
   overflow: hidden;
  }
  li {
   width: 100px;
   height: 50px;
   float: left;
   text-align: center;
   line-height: 50px;
   border-bottom: 1px solid #000;
   border-right: 1px solid #000;
  }
  li:nth-child(5) {
   border-right: none;
  }
  .cur {
   height: 51px;
   background: blue;
   border-bottom: none;
  }
 </style>
</head>
<body>
<p id="app">
 <ul>
  <li v-for="(num,index) in nums" :class="{cur:iscur==index}" @click="iscur = index,tab(&#39;text&#39;+(index+1))">
   {{num.t}}
  </li>
 </ul>
 <p class="box">
  <component :is=&#39;currentView&#39; keep-alive></component>
 </p>
</p>
<script src="vue.js"></script>
<script>
 const text1 = Vue.component(&#39;text1&#39;, {template: `<p><h1>Text111111111111</h1></p>`});
 const text2 = Vue.component(&#39;text2&#39;, {template: `<p><h1>Text222222222222</h1></p>`});
 const text3 = Vue.component(&#39;text3&#39;, {template: `<p><h1>Text333333333333</h1></p>`});
 const text4 = Vue.component(&#39;text4&#39;, {template: `<p><h1>Text444444444444</h1></p>`});
 const text5 = Vue.component(&#39;text5&#39;, {template: `<p><h1>Text555555555555</h1></p>`});
 var vm = new Vue({
  el: "#app",
  data: {
   currentView: text1,
   nums: [{t: "text1"}, {t: "text2"}, {t: "text3"}, {t: "text4"}, {t: "text5"}],
   iscur: 0
  },
  methods: {
   tab(tabText){
    this.currentView = tabText;
   }
  }
 })
</script>
</body>
</html>

Das Obige habe ich für alle zusammengestellt. Ich hoffe, es wird für alle hilfreich sein Zukunft.

Verwandte Artikel:

Npm führt Build in Vue-Paketen aus, abhängig von der Umgebung, in der die Parametermethode übergeben wird.

Verwenden Sie js, um zu realisieren Json-Beispielcode für die Vorder- und Rückseite übertragen

Vue konvertiert die Zeichenfolge mit dem vom Hintergrund übergebenen HTML-Feld in HTML

Das obige ist der detaillierte Inhalt vonVue implementiert die Tab-Umschalt- und Stilumschaltmethode. 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：Detaillierte Erläuterung der Verwendung gängiger integrierter Funktionen in JSNächster Artikel：Detaillierte Erläuterung der Verwendung gängiger integrierter Funktionen in JS

In Verbindung stehende Artikel

Mehr sehen