Maison > Article > interface Web > vue2.0 fonctionne de manière active et les autres options s'excluent mutuellement

vue2.0 fonctionne de manière active et les autres options s'excluent mutuellement

php中世界最好的语言original: 2018-06-08 13:59:191276parcourir

Cette fois, je vais vous présenter l'exclusion mutuelle des autres options de fonctionnement de vue2.0 actives. Quelles sont les précautions pour l'exclusion mutuelle des autres options de fonctionnement de vue2.0 actives. Ce qui suit est un cas pratique, jetons un coup d'œil. . z

en js normal. Si nous voulons obtenir l'effet de cliquer pour sélectionner les actifs puis d'en annuler les autres, nous pouvons définir une classe pour annuler la classe active pour plusieurs doms lorsque vous cliquez dessus, et ajouter ce nom de classe à l'élément actuel. C'est très verbeux, alors allons-y. Directement, regardons le code (cela signifie que l'affiche utilise jq) :

 <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>

L'effet est le suivant :

Mais dans vue, n'est-il pas recommandé d'effectuer des opérations dom. Si vous n'avez pas besoin d'effectuer des opérations dom, il existe un attribut ref dans vue2.0, qui peut obtenir l'effet dom. Alors faisons l'opération sans attraper le dom :

Comme je suis habitué aux échafaudages webpack et vue-cli, tout le code Vue de l'affiche originale est placé dans l'échafaudage webpack, et pug et scss sont également utilisés . Le préprocesseur, code vue est le suivant :

<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>

L'idée est la suivante :

Ce code utilise le mot clé index et l'attribut calculé, lorsque. l'index actuel est le même que l'indice de l'élément actuel cliqué, le nom de la classe active sera déclenché. C'est très concis. Si vous ne comprenez pas, vous pouvez rejoindre les blogueurs pour en discuter ensemble

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus passionnantes, veuillez prêter attention à. d'autres articles connexes sur le site php chinois !

Lecture recommandée :

Vue-cropper pour recadrer les images

Utilisez Element-UI Table pour implémenter la fonction glisser-déposer

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Interprétation détaillée des idées de développement de composants VueArticle suivant：Interprétation détaillée des idées de développement de composants Vue

Articles Liés

Voir plus