vue -点击某个元素改变其样式（如背景色或更换图片）实现点击选中效果

最新推荐文章于 2024-04-29 16:05:57 发布

原创最新推荐文章于 2024-04-29 16:05:57 发布 · 3.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端

工作中的小问题专栏收录该内容

34 篇文章

订阅专栏

本文介绍如何在Vue中通过点击事件改变元素的样式，如切换背景色或替换图片。通过绑定CSS样式和JavaScript逻辑，在数据中记录选中状态，并在组件生命周期中处理图片路径。

效果：

在这里插入图片描述

代码

<el-col
                    :span="12"
                    v-for="item in storeData.store"
                    :key="item.code"
                    class="eachStore"
                  >
                    <span class="eachStore">
                      <img
                        :src="
                          starStoresCode.indexOf(item.code) == -1
                            ? starUrl
                            : starBlueUrl
                        "
                        class="star"
                        @click="addStarStores(item)"
                      />
                      <span
                        @click="selectStore(item)"
                        :class="{
                          bk: selectStoreCode.indexOf(item.code) !== -1
                        }"
                        style="font-size: 14px"
                        >{{ item.name }}</span
                      >
                    </span>
                  </el-col>

css:

.bk {
  background-color: rgb(0, 255, 255);
}

js:(若要实现点击更改图片，需要现在data中定义，且在created生命周期中require路径赋值)

data() {
    return {
      starUrl: '',
      starBlueUrl: '',
      
    }
  },
  watch: {},
  created() {
    this.starUrl = require('@/assets/icons/star.png')
    this.starBlueUrl = require('@/assets/icons/starBlue.png')
  },