vue实现点击变色再次点击变回来

前言

前端开发中有这么一种常见的操作，点击按钮让按钮改变样式，再次点击该按钮让其恢复成默认样式；今天教大家用最简单的方法实现这一操作。

单个div实现效果：

单个div实现思路

首先利用 onClick 点击事件动态改变 showCode 的值，在 html 中通过三元运算符对 showCode 的值进行判断，当 showCode 的值为 true，则生效 frontBox 样式，反之，若 showCode 的值为 false，则生效 laterBox 样式。

单个div源码如下

<template><div @click="onClick" :class="[showCode ? 'frontBox' : 'laterBox']"><div>快速入门</div><div><img :src="showCode ? imgUrlOne : imgUrlTwo" /></div></div>
</template><script>
export default {data() {return {showCode: true, //标识符// 本地图片需要加上require进行动态赋值// imgUrlOne: require("../assets/lanse.png"),// imgUrlTwo: require("../assets/baise.png"),// 在线图片直接链接即可imgUrlOne: "https://s1.ax1x.com/2022/05/19/OHzJtx.png",imgUrlTwo: "https://s1.ax1x.com/2022/05/19/OHz64P.png",};},methods: {// 点击事件onClick() {// 赋值取反this.showCode = !this.showCode;},},
};
</script><style scoped>
/* 共同样式 */
.frontBox,
.laterBox {cursor: pointer;width: 260px;padding: 12px 20px;border-radius: 6px;display: flex;align-items: center;justify-content: space-between;font-weight: bold;
}
/* 第一种样式 */
.frontBox {background: white;color: #587def;
}
/* 第二种样式 */
.laterBox {background: #587def;color: white;
}
/* 图片样式 */
img {width: 40px;height: 18px;vertical-align: middle;
}
</style>

那可能有的同学要问了，我想要点击当前的 div 然后让当前 div 改变样式，但是我点击其他 div 时，上一个 div 样式恢复默认，如下图的操作该怎么实现呢？其实原理上来说是大差不差的，不过我们需要循环所有的 div ，拿到每一条 div 的下标，然后把当前点击的 div 下标跟我们循环的每一个 div 下标做比较，看两者是否相同即可，详情见下方代码。

多个div实现效果：

多个div源码如下

<template><div class="outerBox"><div class="frontBox" :class="[item.showCode ? 'frontBox' : 'laterBox']" v-for="(item,index) in dataList" :key="index"@click="onCilck(index)"><div>{{item.name}}</div><div><img :src="item.showCode ? item.imgUrl : item.imgUrlTwo" /></div></div></div>
</template><script>
export default {data() {return {dataList: [{name: "快速入门",imgUrl: "https://s1.ax1x.com/2022/05/19/OHzJtx.png",imgUrlTwo: "https://s1.ax1x.com/2022/05/19/OHz64P.png",showCode: true,},{name: "用户指南",imgUrl: "https://s1.ax1x.com/2022/05/19/OHzJtx.png",imgUrlTwo: "https://s1.ax1x.com/2022/05/19/OHz64P.png",showCode: true,},{name: "系统管理",imgUrl: "https://s1.ax1x.com/2022/05/19/OHzJtx.png",imgUrlTwo: "https://s1.ax1x.com/2022/05/19/OHz64P.png",showCode: true,},{name: "菜单管理",imgUrl: "https://s1.ax1x.com/2022/05/19/OHzJtx.png",imgUrlTwo: "https://s1.ax1x.com/2022/05/19/OHz64P.png",showCode: true,},],};},mounted() {//如果需要默认选择某一个，指定该div下标为false即可this.dataList[0].showCode = false;},methods: {// 点击事件onCilck(index) {for (var i = 0; i < this.dataList.length; i++) {// index：当前点击的div下标（通过点击事件触发拿到的）// i：循环拿到的每一条div下标if (index == i) {// 通过将两者比较得出应该展示哪一种样式// this.dataList[i].showCode = false;//点击当前div，再次点击当前div不会恢复默认样式，必须点击其他div才会恢复默认样式this.dataList[i].showCode = !this.dataList[i].showCode; //点击当前div，再次点击当前div恢复默认样式，无需点击其他div恢复默认样式} else {this.dataList[i].showCode = true;}}},},
};
</script><style>
.outerBox {display: flex;
}
/* 公共样式 */
.frontBox {cursor: pointer;width: 260px;padding: 12px 20px;border-radius: 6px;display: flex;align-items: center;justify-content: space-between;font-weight: bold;margin-right: 20px;
}
/* 默认样式 */
.frontBox {background: white;color: #587def;
}
/* 点击后样式 */
.laterBox {background: #587def;color: white;
}
/* 箭头图片样式 */
img {width: 40px;height: 18px;vertical-align: middle;
}
</style>

- 拓展延伸

vue 中引入图片时为什么要用 require？

因为我们动态添加的 src 被当成静态资源处理了，并没有进行编译，所以要加上 require 让其动态使用。

vue实现点击变色再次点击变回来相关推荐

纯html+css实现点击显示再次点击隐藏并且不联动的多个下拉菜单
纯html+css实现点击显示再次点击隐藏不联动的多个下拉菜单实现不联动的下拉菜单核心思想: input<type="checkbox">(复选框) label和in ...
Android recyclerView/listview的点击变色、点击换背景颜色
一言不合就上图点击变色: 这里没有用到什么高大上的技术点,只是静下心好好想想"面向对象",利用一点小逻辑. 我这里用的是recyclerView控件,在recyclerView的 ...
vue router-view 匹配路由后，第一次可以点击，再次点击同一个路由无响应，如何处理？
原因可能是data函数没有return 如下: 修改后:问题得以解决
vue项目-点击添加或者修改按钮浏览器的屏幕变黑，再次点击屏幕之后浏览器恢复正常（火狐浏览器、ChromeCoreLauncher双核浏览器）
今天在写springboot+vue项目的时候发现了一个bug,之前写的项目就没有这种情况,bug如下: 点击添加或者修改按钮浏览器的屏幕变黑,再次点击屏幕之后浏览器恢复正常点击修改按钮屏幕变黑 ...
Element UI 的el-menu在VUE项目中实现再次点击左侧菜单栏，右侧页面内容刷新
背景:在对项目进行bug走查的时候,测试人员突然提出项目左侧菜单栏再次点击时候要进行页面刷新,当时我真的懵了,vue项目了router还能在当前页面进行再次刷新!!!我怀着疑惑上网查询.咨询足足使用了 ...
如何实现点击收藏，图标变色；再次点击，取消收藏，图标变回原来的颜色，且能把已收藏的项发送请求给后端
一.思路和步骤 1.明确需求和效果 2.先需要把所有供选择的选项从后端接口获取到,然后用map数组的方法,把所有未收藏的选项筛选出来,然后在模板中绑定筛选出来的数组,然后用v-for循环遍历展示出来每 ...
vue项目一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
vue2.0实现点击后显示，再次点击隐藏
描述.点击系统切换,弹出系统切换框.再次点击系统切换,隐藏.点击其他地方.也会隐藏在layout.vue中写的html代码 1.在main.js中写入全局函数 // 定义全局点击函数,右侧系统切换点 ...
vue+element-ui 实现table单元格点击编辑，并且按上下左右键单元格之间切换
通过我的测试我发现两个两种方法来编辑单元格的内容第一种点击编辑: 我是给td里添加一个input,将值赋值给input,当失去焦点的时候将input的值付给td原来的内容,然后将input删除, 代 ...