Vue JS set active class and remove other by pressing button

Question

I'm using vue.js to make a webpage. I have 3 class in a page, lets call them A B and C. I want to make 2 buttons, next and prev which will determine which class is active.

For example, if class A is active and the next button is pressed, class A will become inactive and B will be active. Pressing prev button will make class B inactive and A active.

this is my code

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators" >
    <li data-target="#carouselExampleIndicators" v-for="(carousel, index) in carouselArray" :key="index" :data-slide-to="index"></li>
  </ol>
  <div class="carousel-inner"> 
    <div class="carousel-item" v-for="(carousel, index) in carouselArray" :key="index"> //here is the active class
       <img :src="carousel.carousel_image_url" class="carousel-img" data-interval="10" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>{{carousel.carousel_caption}}</h5>
        </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev" aria-hidden="true"><i class="fas fa-chevron-left"></i></span>
    <span class="sr-only"></span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next" aria-hidden="true"><i class="fas fa-chevron-right"></i></span>
    <span class="sr-only"></span>
  </a>
</div>

sure sir @bassxzero do i need to make afunction :click for the span button? — someone_that_needHelp
– someone_that_needHelp, Commented Apr 15, 2021 at 9:32

marmot · Accepted Answer · 2021-04-15 09:39:14Z

2

<template>
<div class='demo'>
    <div class="content">
        <li :class="value== 1?'activate':'nonactivated'">A</li>
        <li :class="value== 2?'activate':'nonactivated'">B</li>
        <li :class="value== 3?'activate':'nonactivated'">C</li>
    </div>
    <button @click="prev">prev</button>
    <button @click="next">next</button>
</div>
</template>

<script>
export default {
data() {
//这里存放数据
return {
    value:1
};
},
methods: {
    prev(){
        this.value++; 
        if(this.value > 3){
            this.value = 3;
        }
    },
    next(){
        this.value--;
        if(this.value < 1){
            this.value = 1;
        }  
    },
},
created() {

},
mounted() {

},
}
</script>
<style lang='less' scoped>

</style>

answered Apr 15, 2021 at 9:39

marmot

461 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue JS set active class and remove other by pressing button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related