v-for遍历button按钮后，点击单个或其中一个触发click事件进行改变背景颜色

最新推荐文章于 2024-07-04 20:21:08 发布

可怜的甜味小码农

最新推荐文章于 2024-07-04 20:21:08 发布

阅读量4.2k

点赞数 1

分类专栏： vue.js v-for遍历文章标签： vue js

本文链接：https://blog.csdn.net/weixin_45152103/article/details/106103740

版权

本文介绍了如何在Vue.js中使用v-for遍历生成多个button，并实现点击单个按钮时改变其背景颜色。通过结合template、script和scss的使用，详细展示了实现过程及最终效果。

摘要由CSDN通过智能技术生成

vue.js中用v-for遍历button后点击其中一个进行触发click事件进行背景颜色的改变

在template中的部分

  <view class="typeButton">

		<view  class="btn" v-for="(text,index) in but" :key="index" 									@click="son(text,index)":class='index==isActive?"isActive":""'>
			<view class="btnsss" @click="son(text,index)" :class='index==s1?"s1":""' >
				{
  {text.name}}
			</view>
		</view>
	</view>

在script中的部分

  export default {

	data() {
		return {
			isActive:0,
			s1:0,
			winHeigth:0,
			but:[{name:'城市案件'},{name:'交通案件'},{name:'综合

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

可怜的甜味小码农

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

多个button，改变选中button的背景颜色、字体颜色

Secret_Frist的专栏

06-14

7329

上面是效果图利用for循环创建5个button,其中对这个五个button一定要赋上tag值，因为下面的点击操作我们要用到；看for循环的代码： for (int i=0; i UIButton *button = [[UIButton alloc] init]; button.frame = CGRectMake(10 + 60*i, 1

v-for循环按钮，单选按钮变色

Havanao的博客

09-09

1074

<template> <div class="container"> <div class="circle" v-for="(word,index) in words" v-bind:key="word.id">  <button class="btn" :class="{ red:changeRed == index}" @click="checked(index)"&gt

4 条评论您还未登录，请先登录后发表或查看评论

vue.js中用v-for遍历button后点击其中一个进行触发click事件进行背景颜色的改变第二版

weixin_45152103的博客

05-19

2415

上次的那个版本有点复杂，这次进行优化一下 template源码 <view class="typeButton"> <view class="btn" v-for="(text,index) in but" :key="index" :class=" {isActive:index===s1}" @click="setmun(index)"> {{text.name}} </view> &lt

实现点击Button，改变背景颜色（多个按钮互斥显示）

【爱打盹的喵】的专栏

07-04

920

在界面中，有一组button，现在需要实现下面功能：点击其中一个，改变被点击button的背景颜色。当点击下一个之后，之前点击过的按钮背景颜色还原，当前被点击的button背景色又被改变。效果如下图：当点击了test1，test1的背景色变为了红色。再继续点击test2，test2的背景色变为了红色，而test1的背景色还原。

vue v-for遍历数组点击改变背景色简单操作新手笔记

Donkeyfly1的博客

08-22

1430

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

v-for 遍历后单个点击事件

ttxxsir的博客

05-07

7040

利用v-for 循环遍历出来的数据，通常会配合点击事件去完成一些样式的渲染，仅仅作为个人记录 <template> <div> <div :style="imgSelect.style" v-for="item in imgSelect.list" class="img-wrap"> <img @clic...

Vue-常用系统指令v-bind、v-on、v-model、v-for和 key 属性的使用

weixin_44486539的博客

07-20

2616

v-bind 该指令可以给 HTML 元素或者组件动态地绑定一个或多个特性，比如：style、class。 <input type="button" name="" v-bind:value = "myType" v-bind:title = "msg"> v-bind 指令可简写为 : ，绑定的属性中可以写合法的 JS 代码。 <input type="button"...

el-upload，自定义已上传文件列表的样式，在已上传文件列表的每个文件后增加一个按钮

最新发布

09-26

使用 `v-for` 循环遍历 `el-upload` 的 `list` 数据属性（默认保存已上传文件），并为每个文件创建一个自定义的 `<li>` 元素，加上你需要的按钮： ```html <el-upload :action="uploadUrl" list-type="picture...

一次基于Vue的Vedio.js使用

c_jhsp的博客

06-15

380

遇到的问题 1.由于采用了分页，所以在两次切回到较小的页码时，会有warning警告，提示player对象已经被初始化过。 2.如果调用对象销毁之后，对应的DOM节点也同时会被销毁，根据id获取节点会报找不到对应元素 //以下是解决方法 initVedio() { //初始化视频方法循环列表获取每个视频的id if(this.tableData.length>0){ //在初始化vedio前

vue实现点击按钮切换背景颜色的示例代码

10-15

主要介绍了用vue简单的实现点击按钮切换背景颜色，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

C#遍历文件夹获取指定后缀名文件

08-26

当按钮被点击时，触发button3_Click方法，执行遍历文件夹和获取文件的操作，并将文件名显示在标签label3上。知识点9：using语句在C#中，using语句可以确保正确释放资源，特别是当类实例实现了IDisposable接口时。...

vue中v-for循环出来的元素有一个共同的点击事件（切换背景色），然后还各自具有自己的点击事件

Sunny_lxm的博客

12-27

6423

想要的效果图（在最下方） ‘复制和删除’是两个循环出来的元素，兄弟之间可以切换背景色，然后个自点击以后layer不同，就需要绑定不同的事件这样我们可以把逻辑写在一个函数里面，这样就会用到index 部分代码： 1、我们在data里面声明一个 html： <li v-for="(item,index) in delOrCopy" v-on:click.stop="...

vue使用v-for实现hover点击button按钮颜色变换效果

Schaffer的博客

07-13

4630

使用Vue来实现鼠标悬停效果。可以使用事件处理器v-on指令（简写为：@）来完成。为标签绑定mouseenter以及mouseleave事件即可。 hover是css中的选择器，用于选择鼠标指针浮动在上面的元素。所以a:hover可用于设置当鼠标悬停在超链接之上时超链接的样式。在当今比较流行的前端框架里 vue react 都是以数据驱动的形式来修改元素的状态, 而并非是之前使用jq来操作dom元素, 这样效率也是非常低的, 像vue, react 都是以虚拟dom的形式渲染页面, 以数据的变化来更新虚拟

v-for循环el-button默认选中第一个button按钮,执行第一个按钮的事件

weixin_44740072的博客

06-07

1544

需求: v-for遍历一组按钮，要做到一进入页面高亮就在第一个按钮上面，且执行第一个按钮的方法。data中定义upBtn。

html5单击修改背景色,用获取节点的方式实现点击按钮改变标签背景颜色的问题...

weixin_32017501的博客

06-04

940

跟着视频敲的,视频里的能实现,我的不行,有onclick事件,但是背景色不变html>点击设置p标签背景色div{width:200px;height:400px;border:1pxsolidred;}这是一个span这是一个p这是一个span这是一个p这是一个span这是一个p这是一个amy$("btn").onclick=function(){//获取divvar...

vue点击变色

weixin_50501118的博客

08-22

5504

vue点击一个遍历后元素改变其颜色的方法，有两种情况，第一种是点击单行元素变色，点击另一行元素时，原来变色的元素变回原来的颜色，始终只有一行元素是变色的，第二种情况是点击后永久变色，点击其他元素变色不影响已经变色的元素。=index}]" @tap="btn(index)" >点击介绍...

vue实战--v-for 遍历渲染按钮的两种实现方案（重点：按钮点击事件的绑定技巧）

朝阳39的博客

09-26

3943

方案1：method为方法名的字符串核心代码 @click="callBack(item.method)" callBack(method) { this[method](); }, 完整范例 <template> <div class="mainBox"> <p>{{ msg }}</p> <button v-for="(item, index) in btnList" ..

v-for遍历button按钮后，点击单个或其中一个触发click事件进行改变背景颜色

vue.js中 用v-for遍历button后点击其中一个进行触发click事件进行背景颜色的改变

在template中的部分

在script中的部分

vue.js中用v-for遍历button后点击其中一个进行触发click事件进行背景颜色的改变