vue 事件委托动态修改背景图片

效果图：

<template>
  <div class="nav_box">
    <ul @click="changeClick($event)">
      <li
        v-for="item in 4"
        :key="item"
        class="nav_item"
        :data-index="item"
        :style="{
          background: `url(/static/img/web/nav${item}_height.png) no-repeat`,
        }"
      ></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  components: {},
  methods: {
    changeClick(event) {
      console.log(event);
      let dom = event.target;
      let i = event.target.dataset.index;
      console.log(event.target.textContent); //获取文本内容
      console.log(event.target.dataset.index); //获取自定义属性
      let liDoms = document.querySelectorAll(".nav_item");
      liDoms.forEach((element) => {});
      for (let index = 0; index < liDoms.length; index++) {
        const element = liDoms[index];
        element.style.transform = "none";
        // element.style.background = `none`;
      }

      this.$nextTick(() => {
        dom.style.background = "none";
        dom.style.background = `url(/static/img/web/nav${i}_height.png) no-repeat`;
        dom.style.transform = "scale(1.3)";
      });
    },
  },
};
</script>

<style>
.nav_box {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 4266px;
  height: 342px;
  background: url("/static/img/web/nav_bg.png") no-repeat;
}
.nav_box ul {
  display: flex;
  justify-content: center;
}
.nav_box ul .nav_item {
  width: 220px;
  height: 290px;
  margin: 0 60px;
  /* background: url("/static/img/web/nav1.png") no-repeat !important; */
}
.nav_box .nav_item:hover {
  transform: scale(1.3) !important;
}
</style>

方案2：

<template>
  <div class="nav_box">
    <ul>
      <li
        v-for="(item, index) in navList"
        :key="index"
        class="nav_item"
        :style="{
          background: `url(/static/img/web/nav${item.index}.png) no-repeat`,
        }"
        @click="handleClick(item, $event)"
      ></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: 1,
      navList: [
        { index: 1, url: "/Wisdom" },
        { index: 2, url: "/SourcesOfEnergy" },
        { index: 3, url: "/Environmental" },
        { index: 4, url: "/Safe" },
      ],
    };
  },
  mounted() {
    this.getHeightIndex();
  },
  components: {},
  methods: {
    getHeightIndex() {
      let heightIndex = Number(
        sessionStorage.getItem("heightIndex")
      );
      console.log(heightIndex);
      if (!heightIndex) heightIndex = 1;
      this.$nextTick(() => {
        let dom = document.querySelector(".nav_box ul");
        let li = dom.children[Number(heightIndex) - 1];
        li.style.background = `url(/static/img/web/nav${heightIndex}_height.png) no-repeat`;
      });
    },
    handleClick(item, event) {
      //
      let dom = event.target;
      let heightIndex = item.index - 1;
      sessionStorage.setItem("heightIndex", item.index);
      this.$router.push(item.url);
      //
      //
    },
  },
};
</script>

<style></style>