概述
本文实例为大家分享了Vue实现点击导航栏当前标签后变色的具体代码，供大家参考，具体内容如下
效果图
实现
这个功能，借助一个切换标识，当与各标签项 index 对应时切换 css。
HTML：
<template>
<div class="nav">
<!-- 点击切换变色导航栏 -->
<ul>
<li
v-for="(item,index) in nav"
:class="{ active: index == current }"
@click="go(index)">
{{ item }}
</li>
</ul>
<!-- END -->
</div>
</template>
JavaScript：
<script>
export default {
data(){
return {
current: 0,//切换标识
nav: [//导航栏数据
'首页',
'新闻中心',
'要闻资讯',
'联系我们'
]
}
},
methods: {
// 导航栏切换
go(index) {
this.current = index//激活样式
}
}
}
</script>
CSS：
<style>
/*点击切换变色导航栏*/
ul li {
list-style: none;
float: left;
margin-right: 20px;
padding:10px;
}
.active{/*激活样式*/
color: red;
}
</style>
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持靠谱客。
最后
以上就是悦耳路人为你收集整理的Vue实现点击导航栏当前标签后变色功能的全部内容，希望文章能够帮你解决Vue实现点击导航栏当前标签后变色功能所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复