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实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。