vue中要實現當前元素添加類同級兄弟元素移除類的效果,可使用v-bind:class;
v-bind:class支持變量,當變量發生變化的時候,class將發生變化;
實現方法舉例:
<template>
<div>
<ul>
<li v-for="(item,index) in liList" :key="index" :class="{active:index==current}" @click="addClass(index)">{{item.purpose}}</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
liList:[
{purpose:'洗車'},
{purpose:'美容'},
{purpose:'養護'},
{purpose:'換件'}
],
current:1,//默認哪個有類名
}
},
methods:{
addClass(index){
this.current=index
}
}
}