Heim > Artikel > Web-Frontend > vue2.0 arbeitet aktiv und andere Optionen schließen sich gegenseitig aus

vue2.0 arbeitet aktiv und andere Optionen schließen sich gegenseitig aus

php中世界最好的语言Original: 2018-06-08 13:59:191293Durchsuche

Dieses Mal werde ich Ihnen den gegenseitigen Ausschluss anderer aktiver Vue2.0-Betriebsoptionen vorstellen. Das Folgende ist ein praktischer Fall . z

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 wird nicht empfohlen. Wenn Sie dom nicht verwenden 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:

Vue-Cropper zum Zuschneiden von Bildern

Verwenden Sie Element-UI Table, um die Drag-and-Drop-Funktion zu implementieren

Das obige ist der detaillierte Inhalt vonvue2.0 arbeitet aktiv und andere Optionen schließen sich gegenseitig aus. 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 Interpretation der Entwicklungsideen für Vue-KomponentenNächster Artikel：Detaillierte Interpretation der Entwicklungsideen für Vue-Komponenten

In Verbindung stehende Artikel

Mehr sehen