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 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
写gulp遇到的ES6问题详解
Dec 03 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实现从上传文件创建缩略图的方法
2015/04/02 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
详解vue高级特性
2020/06/09 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
数控技术与应用毕业生自荐信
2013/09/24 职场文书
学年自我鉴定
2014/01/16 职场文书
大学生咖啡店创业计划书
2014/01/21 职场文书
美术指导求职信
2014/03/17 职场文书
学生安全责任书
2014/04/15 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
永远是春天观后感
2015/06/12 职场文书
签证工作证明模板
2015/06/15 职场文书
2015年教师节主持词
2015/07/03 职场文书
法院执行局工作总结
2015/08/11 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
JavaScript 对象创建的3种方法
2021/11/17 Javascript
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android