【Vue实战】使用vue实现点击按钮，改变被点击按钮的样式。

1. 实现思路

为每个按钮设置一个index；
为按钮设置点击事件
获取到按钮点击事件以后，判断index，进而动态修改按钮的class

2. 代码实现

2.1 代码

<template><div class="btnGroup"><buttonv-for="(item, index) in listData":key="index"@click="changeColor(index)":class="activeIndex === index ? 'active' : ''">{{ item }}</button></div>
</template><script>
export default {data() {return {listData: ["Button1", "Button2", "Button3", "Button4", "Button5"],// 标记被选中的按钮的indexactiveIndex: null,};},methods: {changeColor(index) {this.activeIndex = index;}}
};
</script><style lang="less" scoped>
.btnGroup {width: 500px;height: 100px;button {width: 15%;height: 35%;margin: 20px 0 20px 20px;background-color: pink;border: 1px solid skyblue;}// 被选中的按钮的样式.active {background-color: antiquewhite;}
}
</style>

2.2 实现效果

【Vue实战】使用vue实现点击按钮，改变被点击按钮的样式。相关推荐

视频教程-vue 实战培训课程-Vue
vue 实战培训课程从事it开发7年以上,HP.Mysql.linux.apache,nginx,lvs,docker,golang,lua,python,c/c++等技术,对服务化分布式存储.ms ...
vue实战-加入购物车一系列操作
vue实战-加入购物车一系列操作 1.在Detail组件中点击"加入购物车" 同时完成: ①数据存入服务器 ②页面组件跳转以及传参 ③会话存储 1)数据存入服务器设置API接口( ...
editor修改样式 vue_手摸手Electron + Vue实战教程（三）
系列文章: 手摸手Electron + Vue实战教程(一) 手摸手Electron + Vue实战教程(二) ❝ 上一篇我们已经完成了左侧菜单栏的基本样式功能,这一篇我们就主要来开发右侧的Markd ...
vue中echarts的点击事件,给当前点击的柱状图修改背景色
最近项目中需要使用到echarts,需要实现点击柱状图时,修改当前点击的柱状图背景色,且没有阴影背景的效果 (如下图) 这样的话,需要给eharts添加click点击事件,直接贴代码: html: & ...
vue限制点击次数_解决vue 按钮多次点击重复提交数据问题
这个其实是一个很细节的问题. 如果我们操作一个按钮,然后在按钮点击的时候绑定事件. 事件分为两种情况: •第一种: 不操作数据型 •第二种: 操作数据型点击这里我们通过控制isDisable 来设 ...
vue两个按钮切换_vue点击循环添加列表点击来回切换
1.v-on:绑定一个事件后面放事件名简写 @事件名="函数" 例如: 按钮 var vm=new Vue({ el:'#itany', data:{ msg:'hello' ...
vue自定义指令directives实现自动点击事件及自动点击第一个按钮
业务场景:点击弹窗默认加载第一个按钮的数据.vue自定义指令directives实现这个需求目录自动点击所有的按钮. 自动点击第一个按钮, 自动点击所有的按钮. <ul class=&quo ...
vue 按钮多次点击重复提交数据
这个其实是一个很细节的问题. 如果我们操作一个按钮,然后在按钮点击的时候绑定事件. 事件分为两种情况: 第一种: 不操作数据型第二种: 操作数据型 <template><butto ...
vue点击按钮改变按钮样式
一. 效果点击按钮前: 点击按钮后: 再次点击按钮变回原来的样式: 二. 具体代码 <template><div id="box"><button ...
vue 监听浏览器页面关闭_前方高能，这是最新的一波Vue实战技巧，不用则已，一用惊人...
❝ 葡萄美酒夜光杯,欲饮琵琶产品催.客户现场君莫笑,古来埋坑几人回? ❞ 最近一直在开发后台管理系统,日复一日的重复着表单表格表格表单,标准的CV仔,感觉好无聊,如何能在这种无聊的开发过程中去提升自己 ...

【Vue实战】使用vue实现点击按钮，改变被点击按钮的样式。

1. 实现思路

2. 代码实现

2.1 代码

2.2 实现效果

【Vue实战】使用vue实现点击按钮，改变被点击按钮的样式。相关推荐

最新文章

热门文章