Vue点击导航栏当前标签后变色 Vue实现点击导航栏当前标签后变色功能
王佳斌 人气:0想了解Vue实现点击导航栏当前标签后变色功能的相关内容吗，王佳斌在本文为您仔细讲解Vue点击导航栏当前标签后变色的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：Vue点击导航栏标签变色,Vue点击导航栏变色,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实战教程》
加载全部内容