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正则中的RegExp对象对象
Nov 07 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 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
改造一台复古桌面收音机
2021/03/02 无线电
十天学会php之第九天
2006/10/09 PHP
php中$this-&amp;gt;含义分析
2009/11/29 PHP
php错误级别的设置方法
2013/06/17 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
PHP实现微信对账单处理
2018/10/01 PHP
php实现算术验证码功能
2018/12/05 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
javascript 特殊字符串
2009/02/25 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
男方父母证婚词
2014/01/12 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
学校教师读书活动总结
2014/07/08 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
Python语言中的数据类型-序列
2022/02/24 Python