[英]Vue JS set active class and remove other by pressing button
I'm using vue.js to make a webpage.我正在使用 vue.js 制作网页。 I have 3 class in a page, lets call them AB and C.我在一个页面中有 3 个 class,我们称它们为 AB 和 C。 I want to make 2 buttons, next and prev which will determine which class is active.我想制作 2 个按钮,下一个和上一个,这将确定哪个 class 处于活动状态。
For example, if class A is active and the next button is pressed, class A will become inactive and B will be active.例如,如果 class A 处于活动状态并按下下一个按钮,则 class A 将变为非活动状态,而 B 将处于活动状态。 Pressing prev button will make class B inactive and A active.按下 prev 按钮将使 class B 不活动而 A 活动。
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>
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.