vue2.0 fonctionne de manière active et les autres options s'excluent mutuellement-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-06-08 13:59:19

original

1262 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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!