成功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')"