基于Vue实现active点击切换样式

1. html

<footer class="footer" id="footer">
    <div class="item" v-for="(item, index) in footerList" :key="index" :class="{'active': currentSort==index}" @click="active(index)">
	    <router-link :to="item.url">
			<i v-html="item.html"></i>
			<div class="name">{{item.title}}</div>
		</router-link>
	</div>
</footer>

2. 在循环的代码那里添加

:class="{'active': currentSort==index}"

3. 添加样式

.active {
    color: #009eef;
}

4. 初始化数据

 data() {
    return {
        currentSort:0,
    }
  },

5. 调用方法

 methods: {
    active(index) {
       this.currentSort  =  index;
    }
  },

当我们触发点击事件的时候，传入循环的index  ,这样我们就可以将绑定的样式赋给点击到的index