vuejs: src mit einer v-if-Bedingung

Question

Dieser Code funktioniert, aber gibt es eine Möglichkeit, diese beiden Bedingungen und Ausgaben in einer Zeile Code zu konsolidieren?

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

Grundsätzlich, wenn 'pointshover' null ist, dann packt sie das Bild src von leaderPoints [0] .playerimg. Wenn 'pointshover' nicht null ist, dann ist es der src.

Answer 1

Option 1

Dann, wie Sie nur eine Zeile verwendet werden sollen, mit der Lösung von @choasia mit einer kleinen Änderung vorgeschlagen gehen.

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

Sie nicht brauchen die v-wenn, wie dieses Bild immer angezeigt wird, und es wird die pointshover src haben nur dann, wenn es vorhanden ist, und die leaderPoints [0] .playerimg, wenn es nicht.

Option 2

Wenn Sie mit den beiden Zeilen Code gehen sollten Sie wahrscheinlich verwenden:

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

Es ist klarer, was Sie, wenn Sie ein anderes verwenden erreichen möchten.

Option 3

könnten Sie ein computed property verwenden, um die src zu binden.

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

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

Answer 2

Sie können JavaScript expressions in :src verwenden.

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