Home > Article > Web Front-end > vue2.0 operates active and other options are mutually exclusive

vue2.0 operates active and other options are mutually exclusive

php中世界最好的语言Original: 2018-06-08 13:59:191275browse

This time I will bring you the mutual exclusion of other options of vue2.0 operation active. What are the precautions for mutual exclusion of other options of vue2.0 operation active. The following is a practical case, let's take a look. z

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. For dom operations, if you do not need to use 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 original 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!

vue2.0 operates active and other options are mutually exclusive

Related articles