Home > Article > Web Front-end > Implementation steps for other options to be mutually exclusive after active is selected in vue2.0

Implementation steps for other options to be mutually exclusive after active is selected in vue2.0

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

This time I will bring you the steps to implement mutual exclusion of other options after selecting active in vue2.0. What are the things to note when active is selected in vue2.0? What are the practical cases? Get up and take a look.

In normal js. If we want to achieve the effect of clicking to select active and then canceling others, we can define a class to cancel the active class for multiple doms when clicked, and add this class name to the current element. It’s very verbose, so let’s go straight to it. Let’s look at the code (it means the poster is using 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>

The effect is as shown below:

But in vue, it is not recommended.

dom operation, if it is not dom, there is a ref attribute in vue2.0, which can achieve the effect of dom. Then we will not catch the dom to operate:

Since I am used to webpack and vue-cli scaffolding, all the vue codes of the poster are placed in the webpack scaffolding, and pug and scss are also used. The preprocessor, vue code is as follows:

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

The idea is as follows:

This code uses the keyword index and the computed attribute , when the current index index is the same as the subscript of the current element clicked, the active class name will be triggered. It’s very concise. If you don’t understand, you can join the bloggers to discuss

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Implementation steps for other options to be mutually exclusive after active is selected in vue2.0

Related articles