Maison > Article > interface Web > Les étapes de mise en œuvre pour que les autres options s'excluent mutuellement après la sélection de l'actif dans vue2.0

Les étapes de mise en œuvre pour que les autres options s'excluent mutuellement après la sélection de l'actif dans vue2.0

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

Cette fois, je vais vous présenter les étapes pour mettre en œuvre l'exclusion mutuelle des autres options après avoir sélectionné actif dans vue2.0 Quelles sont les précautions qui s'excluent mutuellement après avoir sélectionné actif dans vue2.0. est un cas pratique, on se lève et on regarde.

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-ce pas Il est recommandé d'effectuer des opérations dom Si vous n'utilisez pas dom, il existe un attribut ref dans vue2.0, qui peut obtenir l'effet dom. Ensuite, nous n'attraperons pas le dom pour opérer :

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

Explication détaillée des étapes pour mettre en œuvre l'impression partielle de la page en angulaire

Explication détaillée de les étapes pour utiliser vuex (avec code)

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!

php scss angular webpack 预处理器 JS dom

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：Explication détaillée des exemples de développement de rendu de vueArticle suivant：Explication détaillée des exemples de développement de rendu de vue

Articles Liés

Voir plus