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 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
DIV始终居中的js代码
Feb 17 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
Angularjs过滤器使用详解
May 25 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
Vue项目全局配置微信分享思路详解
May 04 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
如何过滤高亮显示非法字符
2006/10/09 PHP
php HandlerSocket的使用
2011/05/02 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
django 自定义用户user模型的三种方法
2014/11/18 Python
讲解Python中if语句的嵌套用法
2015/05/14 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
python如何通过protobuf实现rpc
2016/03/06 Python
Python端口扫描简单程序
2016/11/10 Python
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
Python读取YAML文件过程详解
2019/12/30 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
django 外键创建注意事项说明
2020/05/20 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
中秋节超市促销方案
2014/01/30 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
升学宴学生致辞
2015/07/27 职场文书