Home >Web Front-end >JS Tutorial >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中世界最好的语言
php中世界最好的语言Original
2018-04-28 13:52:501336browse

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!

Recommended reading:

Detailed explanation of the steps to implement partial printing of the page in angular

Detailed explanation of the steps to use vuex (with code)

The above is the detailed content of Implementation steps for other options to be mutually exclusive after active is selected in vue2.0. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn