vue实现点击当前标签高亮效果【推荐】


Posted in Javascript onJune 22, 2018

实现点击按钮使当前按钮高亮,其他按钮复原的效果

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实现点击当前标签高亮效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个JS翻页效果
Jul 23 Javascript
在html页面上拖放移动标签
Jan 08 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
JSONP跨域请求
Mar 02 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 #Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 #Javascript
JavaScript 下载svg图片为png格式
Jun 21 #Javascript
MVVM 双向绑定的实现代码
Jun 21 #Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 #Javascript
vue树形结构获取键值的方法示例
Jun 21 #Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 #Javascript
You might like
php自定文件保存session的方法
2014/12/10 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
创建Django项目图文实例详解
2019/06/06 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
django中嵌套的try-except实例
2020/05/21 Python
python如何代码集体右移
2020/07/20 Python
python如何对链表操作
2020/10/10 Python
公司投资建议书
2014/05/16 职场文书
金融管理专业求职信
2014/07/10 职场文书
档案工作汇报材料
2014/08/21 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
先进教师事迹材料
2014/12/16 职场文书
小学教研工作总结2015
2015/05/13 职场文书
天河观后感
2015/06/11 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
django中websocket的具体使用
2022/01/22 Python