vue实现点击变色再次点击变回来，让你的页面变得更加动态

水星记_

已于 2023-09-01 11:19:28 修改

阅读量8.7k

点赞数 9

分类专栏： css 文章标签：前端 html

于 2022-05-19 17:06:00 首次发布

本文链接：https://blog.csdn.net/Shids_/article/details/124864119

版权

css 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

前言

当我们在开发网页时，经常需要实现一些简单的交互效果来提升用户体验。其中一个常见的需求是点击一个元素后使其变色，再次点击后恢复原来的颜色。在 vue 中，我们可以很方便地实现这个功能。本文将介绍如何使用 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>