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 相关文章推荐
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
关于angular 8.1使用过程中的一些记录
Nov 25 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
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
python获取从命令行输入数字的方法
2015/04/29 Python
Python遍历指定文件及文件夹的方法
2015/05/09 Python
Python常用知识点汇总
2016/05/08 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
Django自定义manage命令实例代码
2018/02/11 Python
python读取文件名称生成list的方法
2018/04/27 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
python安装twisted的问题解析
2018/08/21 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
linux面试题参考答案(4)
2014/09/21 面试题
竞聘书格式及范文
2014/03/31 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
党员年终个人总结
2015/02/14 职场文书
教师节主持词开场白
2015/05/29 职场文书
golang中的空接口使用详解
2021/03/30 Python
PHP基本语法
2021/03/31 PHP
CocosCreator入门教程之网络通信
2021/04/16 Javascript
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL