使用场景：

产品要求在有产品的时候正常显示产品，没有产品的时候显示提示文字“暂无商品”。

错误的写法：

<div class="dzsj_content" v-if="homeData[3]">
    <div 
        v-for='(item,index) in homeData[3]' 
        :key='index'
        class="dzsj_box_inner"
        @click="goInto(item.id)">
        <div>
            <img :src="item.imgUrl" >
        </div>
        <div>{{item.name}}</div>
        <div v-if="item.price">￥<span>{{item.price}}</span></div>                                      
    </div>
</div>
<h2 v-else class="error">暂无商品</h2>

这样不管有没有商品，都会显示暂无商品，因为渲染的时候数据可能还没有请求完毕，获取不到 homeData[3] 数据，所以要再获取到数据后再判断。

正确的写法：

<div class="dzsj_content" v-if="homeData3">
    <div 
        v-for='(item,index) in homeData[3]' 
        :key='index'
        class="dzsj_box_inner"
        @click="goInto(item.id)">
        <div>
            <img :src="item.imgUrl" >
        </div>
        <div>{{item.name}}</div>
        <div v-if="item.price">￥<span>{{item.price}}</span></div>                                      
    </div>
</div>
<h2 v-else class="error">暂无商品</h2>

getData(){            
    getHome()
    .then(res => {
        let data = res.data;
        console.log(res.data);
        if(data.code == 0){ 
            this.homeData = data.data;
            this.homeData3 = this.homeData[3];
        }  
    })
    .catch(err => {
       console.log(err)
    })         
},