Vue里实现菜单栏选中字体颜色改变效果

我们经常会在项目有点击菜单栏选项后，字体变成其他颜色的效果。在平时我们可以直接通过操作DOM的方法来实现，但是在Vue里，虽然也可以操作DOM,但是本着尽量不操作DOM的原则，我们可以使用通过动态添加class类名的方法来实现

话不多说，给兄弟萌代码奉上

<template>
    <div>
       <ul>
         <li v-for="item,index in List" :key="index"  @click="change(index)"><a href="#" :class="{active:currentIndex === index}">{{item}}</a></li> 
       </ul>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                List:[
                    '公司简介','企业文化','员工天地','产品介绍'
                ],
                currentIndex:0 //定义一个变量，也可认为默认选中的字段
            }
        },
        methods:{
            change(index){
                this.currentIndex=index
            }
        }
    }
</script>

<style lang="scss" scoped>
ul{
    display: flex;
    li{
        margin-right: 20px;
        a{
            color: #000;
        }
    }
}
.active{
    color: red;
}
</style>

大致意思是我们通过循环遍历，得到菜单栏，在li上绑定一个点击事件，传入index参数。在methods里，我们将index赋值给我们所定义的变量currentIndex，然后在a标签上动态添加类名，运用:class来动态添加类名active（active已在style中写好样式），:class动态添加类名时，使用{}对象的方式包裹，里面一般有两个参数，第一个是要添加的类名，第二个是布尔值，表示类名是否生效这样就能愉快的切换菜单改变字体样式了

效果：

1657551641187