Question

此代码有效，但有没有办法将这两个条件和输出合并为一行代码？

<img v-if="pointshover" :src="pointshover" :key="pointshover" class="leaderimg">
<img v-if="!pointshover" :src="leaderPoints[0].playerimg" :key="pointshover" class="leaderimg">

基本上，如果＆＃39; pointhover＆＃39;为null然后它从leaderPoints [0] .playerimg抓取图像src。如果＆＃39; pointhover＆＃39;不是null然后它是src。

Answer 1

选项1

然后，因为您只想使用一行，请使用@choasia提出的解决方案进行一些小改动。

<img :src="pointshover ? pointshover : leaderPoints[0].playerimg" :key="pointshover" class="leaderimg">

你不需要v-if，因为这个图像总是被显示出来，只有当它存在时才会有pointhover src，而当它不存在时它将有leaderPoints [0] .playerimg。

选项2

如果您使用两行代码，您可能应该使用：

<img v-if="pointshover" :src="pointshover" :key="pointshover" class="leaderimg">
<img v-else :src="leaderPoints[0].playerimg" :key="pointshover" class="leaderimg">

如果你使用别的话，你想要完成的事情会更清楚。

选项3

您可以使用computed property绑定src。

<img :src="myImageSource" :key="pointshover" class="leaderimg">

myImageSource(){
    return this.pointshover ? this.pointshover : this.leaderPoints[0].playerimg;
}

Answer 2

您可以在:src中使用JavaScript expressions。

<img v-if="pointshover" :src="pointshover ? pointshover : leaderPoints[0].playerimg" :key="pointshover" class="leaderimg">

vuejs：带有v-if条件的src

2 个答案: