站长资源网络编程
Vue实现点击导航栏当前标签后变色功能
简介本文实例为大家分享了Vue实现点击导航栏当前标签后变色的具体代码，供大家参考，具体内容如下效果图实现这个功能，借助一个切换标识，当与各标签项 index 对应时切换 css。HTML：
-
本文实例为大家分享了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实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。