在我的Vue3组件中使用Vueify,我如何有条件地渲染不同的图像?

jvidinwx  于 2023-04-21  发布在  Vue.js
关注(0)|答案(1)|浏览(165)

我的项目正在使用Vue 3,Vuetify,Vite,并且它正在Vercel上托管。
我想渲染一个不同的图像(排名标志)的基础上给定的值(MMR)。

<template>
...
<v-img
contain
:src="userinfo.threesRankImage"
/>
...
</template>
<script
...
data: () => ({
userinfo: {
...
threesMMR: 1000,
threesRankImage: this.threesMMRToRankImage(this.userinfo.threesMMR),
...
},
}),
methods: {
threesMMRToRankImage(mmr) {
...
} else if (mmr  < 1100) {
return '@/assets/newRankLogos/0.png';
}
...
</script>

并且PNG图像在正确的位置^

yvt65v4c

yvt65v4c1#

Yuu可以使用:

<v-img
  contain
  :src="threesMMRToRankImage(userinfo.threesMMR)"
/>

并从data()中删除

threesRankImage: this.threesMMRToRankImage(this.userinfo.threesMMR),

最后一行调用了this.userinfo.threesMMR,它只是在同一个data()方法体中声明的

相关问题