vuejs：v-if条件付きのsrc

Question

このコードは機能しますが、これらの2つの条件を統合して1行のコードに出力する方法はありますか？

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

「pointshover」がnullの場合、基本的にleaderPoints [0] .playerimgからイメージsrcを取得します。 'pointshover'がnullでない場合、それはsrcです。

Answer 1

オプション1

その後、あなたは小さな変更で@choasiaによって提案された解決策と一緒に行く、一行だけを使用したいと。

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

そうでない時に[0] .playerimgこの画像が常に表示されるようあなたがv-場合は必要ありませんし、それが存在する場合にのみpointshover srcを持ち、leaderPointsます。

オプション2

あなたは2行のコードで行く場合は、おそらく使用する必要があります。

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

それはあなたがそれ以外を使用する場合に達成したいものを明確です。

オプション3

あなたはSRCをバインドするcomputed propertyを使用することができます。

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

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

Answer 2

JavaScript expressionsを:srcに使用できます。

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