更改所选图像

Question

我是 Vue 的新手，所以我需要你的帮助。 我有一个菜单组件，我基本上有一个侧边栏菜单。在我的侧边栏菜单中，我列出了不同的导航。我的 html 代码如下所示：

<template>
  <menu>
    <router-link to="/">
      <li>
        <div class="Pic">
          <img src="Pic1-active” />
        </div>
        <div class="Name">Home</div>
      </li>
    </router-link>
    <router-link to="/distination2">
      <li>
        <div class="Pic">
          <img src=”pic2-inactive" />
        </div>
        <div class="Name">Home2</div>
      </li>
    </router-link>
   <router-link to="/distination3">
      <li>
        <div class="Pic">
          <img src=”pic3-inactive" />
        </div>
        <div class="Name">Home3</div>
      </li>
    </router-link>
  </menu>
</template>

我可以动态更改活动 routerlink 的 css。例如，在我的样式表中，我可以这样做：

menu{

//some styles applied to menu

   a{
      text-decoration: none;

      &.router-link-exact-active{  //these styles are applied only when routerlink is clicked/activated
      li {
        color: red;
      }
    }
}

但是，当我单击其中一个链接时，我还希望能够将我的 img 源更改为不同的图片。每个链接我有两张图片。一张图片称为“pic-active”，另一张称为“pic-inactive”，对于第二个routerlink，我有“pic2-active”和“pic2-inactive”等等。有没有办法在单击路由器时动态更改我的图像源？谢谢！

Answer 1

Basically you can do something like this and give conditional so when they meet requirements you get the style/ image you want

   
 <template>
      <menu>
        <router-link to="/">
          <li>
            <div :class="toggleData ? 'style-one' : 'style-two'"> <!-- Check if toggledata true we use style-one css, if not style-two -->
              <img :src="toggleData ? 'image-one-link' : 'image-link-two'" /> <!-- Check if toggledata true we use image-one-link, if not image-two-link -->
            </div>
            <div class="name" >Home</div>
          </li>
        </router-link>
        <router-link to="/distination2">
          <li>
            <div class="Pic">
              <img src='' />
            </div>
            <div class="Name">Home2</div>
          </li>
        </router-link>
        <router-link to="/distination3">
          <li>
            <div class="Pic">
              <img src='' />
            </div>
            <div class="Name">Home3</div>
          </li>
        </router-link>
        <button @click="buttonClick"> Click Me </button> <!-- When button click we change toggleData value to true -->
      </menu>
    </template>
    
    <script>
    export default {
      data() {
        return {
          toggleData: false,
        };
      },
      methods: {
        buttonClick() {
          this.toggleData = true;
        },
      },
    }
    </script>
    
    <style scoped>
    .style-one {
      background: red;
    }
    .style-two {
      background: blue;
    }
    </style>