Vue实现点击导航栏当前标签后变色功能


Posted in Javascript onAugust 19, 2020

本文实例为大家分享了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实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 Javascript
antd table按表格里的日期去排序操作
Nov 17 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 #Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 #Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 #Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 #Javascript
JavaScript中交换值的10种方法总结
Aug 18 #Javascript
js+css3实现炫酷时钟
Aug 18 #Javascript
纯js+css实现在线时钟
Aug 18 #Javascript
You might like
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
PHP4实际应用经验篇(9)
2006/10/09 PHP
同时提取多条新闻中的文本一例
2006/10/09 PHP
function.inc.php超越php
2006/12/09 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
浅谈Node Inspector 代理实现
2017/10/19 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
react redux入门示例
2018/04/19 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
Python自定义简单图轴简单实例
2018/01/08 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
keras输出预测值和真实值方式
2020/06/27 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
数控技术专业推荐信
2013/11/01 职场文书
门卫人员岗位职责
2013/12/24 职场文书
经典公益广告词
2014/03/13 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL