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 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
window.onload使用指南
Sep 13 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
微信小程序音乐播放器开发
Nov 20 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
jquery maxlength使用说明
2011/09/09 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
python回调函数的使用方法
2014/01/23 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
用Eclipse写python程序
2018/02/10 Python
python中wx模块的具体使用方法
2020/05/15 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
出纳岗位职责范本
2013/12/01 职场文书
百度吧主申请感言
2014/01/12 职场文书
开学典礼主持词
2014/03/19 职场文书
群教个人对照检查材料
2014/08/20 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android