vue实现点击当前标签高亮效果【推荐】
更新时间：2018年06月22日 10:57:14 作者：dong-v
这篇文章主要介绍了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实现点击当前标签高亮效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
VUE中computed 、created 、mounted的先后顺序说明
这篇文章主要介绍了VUE中computed 、created 、mounted的先后顺序说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了vue-cli3 设置端口号(81)无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-02-02
Vue.js作为一个灵活的JavaScript框架,可以很容易地与图像处理库和滤镜效果库集成,以实现各种图像处理需求,下面我们就来学习一下vue是如何实现图片处理与滤镜效果的吧2023-10-10
这篇文章主要为大家介绍了Vue开发常用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要给大家介绍了关于vue3中封装axios请求的最新实现步骤,在Vue 3中可以通过封装axios来实现接口的统一管理和调用,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue学习笔记之过滤器的基本使用方法,结合实例形式分析了vue.js过滤器的基本功能、用法与操作注意事项,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了vue 路由守卫(导航守卫)及其具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了vue中设置height 100%无效的问题及解决方法，需要的朋友可以参考下2018-07-07
发中会有要获取当前日期的需求,有的是获取到当前月份,有的是精确到分秒,在 Vue 开发中,获取当前时间是一项常见的需求,本文将深入探讨Vue获取当前系统日期(年月日),帮助您更好地利用当前时间,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue打包更新packge.json版本号的全过程,文章通过图文结合的方式给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-08-08
最新评论