Vue里实现菜单栏选中字体颜色改变效果
大致意思是我们通过循环遍历,得到菜单栏,在li上绑定一个点击事件,传入index参数。在methods里,我们将index赋值给我们所定义的变量currentIndex,然后在a标签上动态添加类名,运用:class来动态添加类名active(active已在style中写好样式),这样就能愉快的切换菜单改变字体样式了效果:1657551641187...
·
我们经常会在项目有点击菜单栏选项后,字体变成其他颜色的效果。在平时我们可以直接通过操作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
更多推荐
已为社区贡献2条内容
所有评论(0)