背景
后臺(tái)返回的數(shù)據(jù)并不是固定的，可能為一個(gè)對(duì)象或者為空威恼，可能是一個(gè)數(shù)組或者為空。
場(chǎng)景
對(duì)象為空
要展示的文字信息存在于對(duì)象的一個(gè)屬性中寝并，對(duì)象可能為空沃测，屬性可能為空，也可能為空字符串食茎，這些情況都顯示暫無(wú)蒂破。
<span>{{propertyShow}}</span>
data () {
return {
// 默認(rèn)值
propertyShow: '暫無(wú)'
}
}
當(dāng)獲取到后臺(tái)的數(shù)據(jù)后，如果不為空或空字符串别渔，就賦值附迷。
if (res.data.obj !== null) {
if (res.data.obj.property !== null) {
if (res.data.obj.property.trim() !== '') {
this.propertyShow = res.data.obj.property
}
}
}
數(shù)組為空
要展示的圖片在數(shù)組中，數(shù)組可能為空哎媚，也可能為空數(shù)組喇伯，默認(rèn)展示第一張圖片。
方式一
將值設(shè)置為數(shù)組類(lèi)型
this.list = res.data.list || []
設(shè)置默認(rèn)圖片時(shí)只需判斷數(shù)組長(zhǎng)度
<img v-if="list.length>0" :src="list[0].url" alt="圖片">
<img v-else src="../default.png" alt="默認(rèn)圖">
方式二
不設(shè)置值類(lèi)型拨与，直接賦值
this.list = res.data.list
設(shè)置默認(rèn)圖片時(shí)需要判斷是否為空稻据，而且必須先判斷空，否則length會(huì)報(bào)錯(cuò)
1>
<img v-if="list===null || list.length===0" src="../default.png" alt="默認(rèn)圖">
<img v-else :src="list[0].url" alt="圖片">
2>
<img v-if="list===null" src="../default.png" alt="默認(rèn)圖">
<img v-else-if="list.length>0" :src="list[0].url" alt="圖片">
<img v-else src="../default.png" alt="默認(rèn)圖">
<img v-if="list===null" src="../default.png" alt="默認(rèn)圖">
<img v-else-if="list.length===0" src="../default.png" alt="默認(rèn)圖">
<img v-else :src="list[0].url" alt="圖片">
