前言
前端开发中有这么一种常见的操作，点击按钮让按钮改变样式，再次点击该按钮让其恢复成默认样式；今天教大家用最简单的方法实现这一操作。
单个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让其动态使用。
