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

Posted 2022-05-20 水星记_

前言

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

实现效果如下：

实现思路

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

源码如下

<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>

- 拓展延伸

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

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