Javascript Vue JS设置活动类并按按钮删除其他类

我正在使用vue.js制作网页。我有3个类在一个页面中，让我们称它们为B和C。我想做2个按钮，下一个和上一个，这将决定哪个类是活动的

例如，如果A类处于活动状态，按下“下一步”按钮，则A类将变为非活动状态，B类将处于活动状态。按下prev按钮将使B类处于非活动状态，A类处于活动状态

这是我的密码

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

//这是活跃的课堂
{{carousel.carousel_caption}

A
B
C
上
下一个
导出默认值{
数据（）{
//这里存放数据
返回{
价值：1
};
},
方法：{
prev（）{
这个.value++；
如果（this.value>3）{
该值=3；
}
},
下一个（）{
这是价值观；
如果（该值小于1）{
这个值=1；
}  
},
},
创建（）{
},
安装的（）{
},
}

A
B
C
上
下一个
导出默认值{
数据（）{
//这里存放数据
返回{
价值：1
};
},
方法：{
prev（）{
这个.value++；
如果（this.value>3）{
该值=3；
}
},
下一个（）{
这是价值观；
如果（该值小于1）{
这个值=1；
}  
},
},
创建（）{
},
安装的（）{
},
}

您可以发布当前使用的代码吗？确定sir@bassxzero是否需要执行功能：单击span按钮？您可以发布当前使用的代码吗？确定sir@bassxzero是否需要执行功能：单击span按钮？

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