要在 Vue.js 裡設定在不同條件下讀取不同圖片,可以參考以下做法:
方法一:
如果是只有 if/else,可以使用條件判斷式,比如:
<img :src="active ? 'active.jpg' : 'default.jpg'" >
方法二:
在標籤上使用 v-if 跟 v-else
<img v-if="active" :src="'active.jpg'" :>
<img v-else :src="default.jpg'" >
方法三:
使用 computed,這個方法可以寫比較複雜的判斷,或是有更好的可讀性:
<img :src="myImageSource" >
myImageSource(){ return this.active ? 'active.jpg' : 'default.jpg'; }
以上給有需要的參考。