Heim > Artikel > Web-Frontend > Implementierungsschritte für andere Optionen, die sich gegenseitig ausschließen, nachdem in vue2.0 „Aktiv“ ausgewählt wurde

Implementierungsschritte für andere Optionen, die sich gegenseitig ausschließen, nachdem in vue2.0 „Aktiv“ ausgewählt wurde

php中世界最好的语言Original: 2018-04-28 13:52:501287Durchsuche

Dieses Mal werde ich Ihnen die Schritte zum Implementieren des gegenseitigen Ausschlusses anderer Optionen nach der Auswahl von „Aktiv“ in vue2.0 vorstellen ist ein praktischer Koffer, man steht auf und schaut mal rein. in normalem js. Wenn wir den Effekt erzielen möchten, dass wir durch Klicken die aktive Klasse auswählen und dann andere abbrechen, können wir eine Klasse definieren, die beim Klicken die aktive Klasse für mehrere Doms abbricht, und diesen Klassennamen zum aktuellen Element hinzufügen. Das ist sehr ausführlich, also los geht's Schauen wir uns gleich den Code an (das bedeutet, dass das Poster jq verwendet):

 <style>
  * {
   margin: 0;
   padding: 0;
  }
  li {
   list-style: none;
   width: 100px;
   margin-top: 10px;
   border: 1px solid red;
  }
  li:active {
   cursor: pointer;
  }
  .active {
   background-color: aqua;
  }
 </style>
 <script src="http://g.ydbcdn.com/jquery/latest/jquery.min.js"></script>
</head>
<body>
<ul>
 <li>this is pne</li>
 <li>this is two</li>
 <li>this is three</li>
</ul>
</body>
<script>
 $(() => {
  $("li").click((e) => {
   $("li").removeClass("active");
   $(e.target).addClass("active");
  })
 })
</script>

Der Effekt ist wie folgt:

Aber in vue, es wird nicht empfohlen.

Dom-Operation

. Wenn Sie dom nicht ausführen müssen, gibt es in vue2.0 ein ref-Attribut, das den Effekt von dom erzielen kann. Dann führen wir den Vorgang aus, ohne den Dom abzufangen: Da ich an Webpack- und Vue-Cli-Gerüste gewöhnt bin, wird der gesamte Vue-Code des Originalplakats im Webpack-Gerüst platziert und auch Pug und SCSS verwendet . Der Präprozessor-Vue-Code lautet wie folgt:

<template lang="pug">
 ul
  li(v-for="(item,index) in classArr", @click="result(index)", :class="resultNum === index?'active':''") this is {{item}}
</template>
<style lang="scss">
 li {
  list-style: none;
  width: 100px;
  margin-top: 10px;
  border: 1px solid red;
  &:hover {
   cursor: pointer;
  }
 }
 .active{
  background-color: aqua;
 }
</style>
<script>
 export default{
  data(){
   return {
    classArr: ["one", "two", "three"],
    num:"",
   }
  },
  methods: {
    result(index){
     this.num = index;
    }
  },
  computed:{
    resultNum(){
     return this.num;
   }
  }
 }
</script>

Die Idee ist wie folgt:

Dieser Code verwendet den Schlüsselwortindex und das berechnete Attribut, wenn der aktuelle Index Wenn der Index mit dem Index des aktuell angeklickten Elements übereinstimmt, wird der aktive Klassenname ausgelöst. Es ist sehr prägnant. Wenn Sie es nicht verstehen, können Sie es mit den Bloggern gemeinsam diskutieren.

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Weitere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Implementieren des teilweisen Druckens der Seite im Winkel

Detaillierte Erläuterung von die Schritte zur Verwendung von Vuex (mit Code)

Das obige ist der detaillierte Inhalt vonImplementierungsschritte für andere Optionen, die sich gegenseitig ausschließen, nachdem in vue2.0 „Aktiv“ ausgewählt wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php scss angular webpack 预处理器 JS dom

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 Beispiele für die Vue-Render-EntwicklungNächster Artikel：Detaillierte Erläuterung der Beispiele für die Vue-Render-Entwicklung

In Verbindung stehende Artikel

Mehr sehen