javascript - Vue：如果满足特定条件，则应用 css 类

问题描述

我正在使用 vuex 制作自定义图像滑块，我想将特定类应用于用于导航滑块的点，因此如果该点处于活动状态，它将应用一个 dotActive 类。我想为此使用 activeSlider 变量

这是滑块组件：

<template>
<section class="slider_maincontainer">
    <transition-group name="slider-fade">
        <div class="slider_item" v-show="activeSlider===1" style="background-color:red;">
            <!--slider content-->
        </div>
        <div class="slider_item" v-show="activeSlider===2" style="background-color:blue;">
            <!--slider varied content-->
        </div>
        <div class="slider_item" v-show="activeSlider===3" style="background-color:green;">
            <!--another slider-->
        </div>
    </transition-group>
    <button class="slider_buttom_prev" @click="prevSlider()">
        <i class="slider_buttom_icon fas fa-angle-left"></i>
    </button>
    <button class="slider_buttom_next" @click="nextSlider()">
        <i class="slider_buttom_icon fas fa-angle-right"></i>
    </button>
    <div class="slider_dots_container">
    <!--how to apply custom class to this dot depending of activeIndex
        <span class="slider_dots_dot" v-for="slider in slidersCount" :key="slider" @click="goToSlider(slider)"></span>
    </div>
</section>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapActions } from 'vuex'
export default {
name: 'MainSlider',

computed:{
    ...mapState('MainSlider', ['activeSlider', 'slidersCount']),
},

mounted() {
    console.log(this.$options.name+' component successfully mounted');
    this.startSlider();
},

methods:{
    ...mapActions('MainSlider', ['nextSlider', 'prevSlider']),
}
};
</script>

还有我的滑块商店：

//STATE
const state = {
  slidersCount: 3,
  sliderInterval: 3000,
  activeSlider: 1,

}

//GETTERS
const getters = {

}

//ACTIONS
const actions = {


    prevSlider ({ commit, state }) {
        if(state.activeSlider == 1){
            commit( 'TO_LAST_SLIDER' );
        }
        else{
            commit( 'PREV_SLIDER' );
        }
    },


    nextSlider ({ commit, state }) {
        if(state.activeSlider == state.slidersCount){
            commit( 'TO_FIRST_SLIDER' );
        }
        else{
            commit( 'NEXT_SLIDER' );
        }
    },


    goToSlider ({ commit, sliderIndex }) {
        commit('GO_TO_SLIDER', sliderIndex)
        
    },



}

//MUTATIONS
const mutations = {


    PREV_SLIDER (state) {
        state.activeSlider--;
    },

    NEXT_SLIDER (state) {
        state.activeSlider++;
    },

    GO_TO_SLIDER (state, sliderIndex) {
        state.activeSlider = sliderIndex;
    },

    TO_FIRST_SLIDER (state) {
        state.activeSlider = 1;
    },

    TO_LAST_SLIDER (state) {
        state.activeSlider = state.slidersCount;
    },


}

export default {
    namespaced: true, state, getters, actions, mutations
  }

我知道如果每个 dom 滑块与一个对象相关联并使用 v-for ，这可以变得更容易，但是我不能用原始 dom 元素做到这一点，我没有从后端或任何东西获取滑块图像。

标签： javascriptvue.jsvuejs2

javascript - Vue：如果满足特定条件，则应用 css 类

问题描述

解决方案

推荐阅读