vue实现点击当前标签高亮效果【推荐】
实现点击按钮使当前按钮高亮,其他按钮复原的效果
实现思路
•在data中定义即将渲染的数据,及active
data() { return { wpList: [ { name: '食品饮料' }, { name: '鲜花' }, { name: '蛋糕' }, { name: '水果生鲜' }, { name: '服装鞋帽' }, { name: '其它' } ], active:'' } } ...
•定义高亮的标签类名
.active { background: #fd7522; border: 1px solid #fd7522; color: #fff; }
•动态渲染按钮的数据,并动态的增加active类名(当active为当前name值时添加),添加点击事件(点击时让active=name)
<el-row class="wp-list"> <el-button v-for="item in wpList" :key="item.name" :class="{active : active == item.name}" @click="selected(item.name)">{{item.name}}</el-button> </el-row>
•在methods中定义点击事件函数
selected(name){ this.active = name; }
总结
以上所述是小编给大家介绍的vue实现点击当前标签高亮效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
IntelliJ IDEA编辑器配置vue高亮显示
本文实例为大家分享了IntelliJ IDEA编辑器配置vue高亮显示的具体实现方法,供大家参考,具体内容如下 1.查找IntelliJ IDEA是否已经安装vue.js 注:之前有写过关于使用cmd命令搭建vue项目的全部过程,详情在此 打开IDEA编辑器,快捷键Ctrl+Alt+S打开Settings(设置)------>Plugins------>搜索vue.js(图中已经安装,没有安装的点击Install JetBrains plugins...进行安装即可),安装成功后重启IDEA.
-
基于Vue实现关键词实时搜索高亮显示关键词
最近在做移动real-time-search于实时搜索和关键词高亮显示的功能,通过博客的方式总结一下,同时希望能够帮助到别人~~~ 如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github上,可以clone下来直接看代码 https://github.com/IT0315/real-time-search.git 下面是demo运行的效果图 好了闲话不多说直接上代码 实时搜索 实时搜索通过触发input事件和定时器来实现 <input v-model="keyWords&quo
-
Vue-路由导航菜单栏的高亮设置方法
如下所示: 默认情况下,路由的导航菜单,会自动给当前菜单添加router-link-exact-active 和router-link-active 类. 我们可以通过 linkActiveClass 来修改 router-link-active 这个类名, 在路由规则配置中添加配置项linkActiveClass: 'mui-active',通过'mui-active'来自定义控制菜单栏切换样式 以上这篇Vue-路由导航菜单栏的高亮设置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,
-
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
本文介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持,分享给大家,具体如下: 一个小遗憾 能来看这篇文章的想必不用我来介绍vue是什么了.先让我们膜拜大神!vue项目的创建者尤大写了个sublime下语法高亮的插件,有人问他how about webstorm support?他是这么回答的.默哀一分钟. 添加高亮和语法支持 这个我是通过插件来实现的.网上目前有两个插件: 插件1:https://github.com/henjue/vue-for-idea 插件2:htt
-
vue实现a标签点击高亮方法
如下所示: <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--<link hre
-
Sublime Text新建.vue模板并高亮(图文教程)
本文介绍了 Sublime Text新建.vue模板并高亮(图文教程),分享给大家,也给自己留个笔记. 准备工作 下载安装新建文件模板插件 SublimeTmpl 下载安装vue语法高亮插件 Vue Syntax Highlight Sublime Text安装插件的方法有两种: 1.使用Sublime Text自带的安装库 Package Control 去安装 点击菜单栏的 Preferences -> Package Control 或使用快捷键 CTRL+SHIFT+P 打开终端窗口,输
-
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
我的GitHub前端经验总结,喜欢的话请点star:Thanks.: https://github.com/liangfengbo/frontend-develop vuejs导航条高亮我的做法: 用一个数组存导航条,用v-for循环它,这样可以减少代码,二可以使用它的下标来判断高亮,三还可以获取后端的导航信息来遍历 重点是在:routerLink(index, path)函数,传入当前点击的下标,自定义一个下标,判断是否相等就用三元符号判断多给一个高亮样式 如何解决刷新就不高亮或第一个高亮了,
-
详解让sublime text3支持Vue语法高亮显示的示例
让sublime text3支持Vue语法高亮显示 1.准备语法高亮插件vue-syntax-highlight. 下载地址: https://github.com/vuejs/vue-syntax-highlight 下载页面并下载: 解开压缩包vue-syntax-highlight-master,其内所有文件备用. 2.将vue-syntax-highlight植入sbulime. 进入sublime,选择菜单项"Preferences->Browse Packages...&quo
-
vue结合Echarts实现点击高亮效果的示例
本文主要介绍如何在vue中使用Echarts实现点击高亮效果. 1.首先看一下官方网站上的介绍: http://echarts.baidu.com/api.html#action.graph.focusNodeAdjacency 2.在初始化的时候绑定这两个事件.需要绑定的事件是鼠标的点击事件和右键点击事件. mounted: function () { let that = this; let myChart = this.$echarts.init(document.getElementBy
-
Vue 菜单栏点击切换单个class(高亮)的方法
步骤: 遍历对象(goods)获取菜单栏每一项的对象(item)和下标(index) 添加点击事件toggle(),传入下标参数:@click="fn1();fn2()" 动态切换classname::class="{'active':index ==checkindex }"> (class赋予对应下标值的DOM) ps:该方法直接切换class,不需要手动添加清除其他非动态DOM的class html <ul> <li v-for=&qu
随机推荐
- 正则表达式初运用之认证界面的实现代码
- JavaScript的继承实现小结
- JavaScript面向对象编写购物车功能
- JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
- php自定义分页类完整实例
- C# 快速高效率复制对象(表达式树)
- php在apache环境下实现gzip配置方法
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
- Shell脚本遍历目录并批量修改文件编码
- mysql锁定单个表的方法
- 提高Web性能的前端优化技巧总结
- sqlserver 多表查询不同数据库服务器上的表
- jQuery右下角旋转环状菜单特效代码
- JS实现的自定义水平滚动字体插件完整实例
- Java设计模式之单例模式实例分析
- 深入解析Android中的setContentView加载布局原理
- 浅谈C# winForm 窗体闪烁的问题
- 完美解决PHP中文乱码
- python实现简单中文词频统计示例
- Python常用字符串替换函数strip、replace及sub用法示例