Vue实现点击导航栏当前标签后变色功能
(编辑:jimmy 日期: 2024/12/26 浏览:3 次 )
本文实例为大家分享了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实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:JS实现悬浮球只在一侧滑动并且是横屏状态下