vue2.0 arbeitet aktiv und andere Optionen schließen sich gegenseitig aus-js-Tutorial-php.cn

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

php中世界最好的语言

Freigeben： 2018-06-08 13:59:19

Original

1243 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!