成功vue img动态切换图片

<el-menu
      mode="horizontal"
      class="topMenu"
      background-color="transparent"
      text-color="#fff"
      active-text-color="#ffd04b"
      :default-active="ActiveIndex"
      :router="false"
      :unique-opened="true"
      @select="HandleSelect"
    >
      <el-menu-item index="1" @click="newPatient" v-if="if_newPatient">
        <div style="margin-top: 10px; text-align: center">
          <img style="width: 48px; height: 48px" :src="ActiveIndex==6?require('@/assets/img/xjbl.png'):require('@/assets/img/xjbl2.png')" />
        </div>
        <div style="font-size: 12px; margin-top: 2px; text-align: center">
          测试1
        </div>
      </el-menu-item>
      <el-menu-item index="2" @click="SelectCase" v-if="if_SelectCase">
        <div style="margin-top: 10px; text-align: center">
          <img style="width: 48px; height: 48px" :src="ActiveIndex==6?require('@/assets/img/kjcx.png'):require('@/assets/img/kjcx2.png')" />
        </div>
        <div style="font-size: 12px; margin-top: 2px; text-align: center">
          测试2
        </div>
      </el-menu-item>
      <el-menu-item index="3" @click="SampleStorage" v-if="if_SampleStorage">
        <div style="margin-top: 10px; text-align: center">
          <img style="width: 48px; height: 48px" :src="ActiveIndex==6?require('@/assets/img/ybrk.png'):require('@/assets/img/ybrk2.png')" />
        </div>
        <div style="font-size: 12px; margin-top: 2px; text-align: center">
          测试3
        </div>
      </el-menu-item>
      <el-menu-item index="4" @click="WarehouseOut" v-if="if_WarehouseOut">
        <div style="margin-top: 10px; text-align: center">
          <img style="width: 48px; height: 48px" :src="ActiveIndex==6?require('@/assets/img/ybck.png'):require('@/assets/img/ybck2.png')" />
        </div>
        <div style="font-size: 12px; margin-top: 2px; text-align: center">
          测试4
        </div>
      </el-menu-item>
      <el-menu-item
        index="5"
        @click="StatisticalQuery"
        v-if="if_StatisticalQuery"
      >
        <div style="margin-top: 10px; text-align: center">
          <img style="width: 48px; height: 48px" :src="ActiveIndex==6?require('@/assets/img/tjcx.png'):require('@/assets/img/tjcx2.png')" />
        </div>
        <div style="font-size: 12px; margin-top: 2px; text-align: center">
         测试5
        </div>
      </el-menu-item>
      <el-menu-item
        index="6"
        @click="LaboratoryManagement"
        v-if="if_LaboratoryManagement"
      >
        <div style="margin-top: 10px; text-align: center">
          <img style="width: 48px; height: 48px" :src="ActiveIndex==6?require('@/assets/img/sysgl.png'):require('@/assets/img/sysgl2.png')" />
        </div>
        <div style="font-size: 12px; margin-top: 2px; text-align: center">
          测试6
        </div>
      </el-menu-item>
    </el-menu>
export default {
  data() {
    return {
      ActiveIndex: "",
      SearchContent: "",
      if_newPatient: false,
      if_SelectCase: false,
      if_SampleStorage: false,
      if_WarehouseOut: false,
      if_StatisticalQuery: false,
      if_LaboratoryManagement: false,
    };
  },
关键代码::src="ActiveIndex==6?require('@/assets/img/sysgl.png'):require('@/assets/img/sysgl2.png')"

(0)

相关推荐