如何用Vue实现点击导航栏标签自动变色功能？

本文共计383个文字，预计阅读时间需要2分钟。

原文：本文字例为大家庭分享了Vue实现点击导航栏当前标签页后变色的具体代码，供大家参考。具体内容如下：效果图+实现+这个功能，借助一个切换标识，当与各标签项index+对应时切换+css。

改写后：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实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。