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 相关文章推荐
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
jQuery滚动加载图片效果的实现
Mar 06 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
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学习笔记之一
2011/01/17 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
tagName的使用,留一笔
2006/06/26 Javascript
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
Python+Wordpress制作小说站
2017/04/14 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
一份Java笔试题
2012/02/21 面试题
装饰资料员岗位职责
2013/12/30 职场文书
银行职员思想汇报
2013/12/31 职场文书
工艺员岗位职责
2014/02/11 职场文书
租房协议书
2014/04/10 职场文书
国际贸易求职信
2014/07/05 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
华山导游词
2015/02/03 职场文书
担保书范文
2019/07/09 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server
GPU服务器的多用户配置方法
2022/07/07 Servers
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技