從天氣API中獲取天氣預(yù)報,每三個小時一檔,我想做成下圖那樣.

而天氣API的返回的json樣式是:

,我的代碼是:

        <ul class="hourly">
            <li class="hourly-item" v-for="(item,index) in Hourlyforecast">
                <p class="time">{{item.time.slice(11)}}</p>
                <div class="hourly-img">
                    <img src = 'static/weather-icon/103.png'  alt="">
                </div>
                <p class="hourly-temp"><span class="hourly-temp-span">9</span><span class="angle">°</span></p>
            </li>
        </ul>

    data() {
        return {
            Hourlyforecast:{},
        }
    },
        methods:{
        getWeather()  {
            var that = this;
            this.$http.get(wURL).then(function (response) {
            response = response.data;
            var weatherInfo = response.HeWeather6[0];
            var hourly = weatherInfo.hourly.splice(0,4);//逐小時array
            that.Hourlyforecast = hourly;
        });
        }
    },

所以我可以通過item.time 獲得時間,但是圖片的鏈接,是根據(jù) cond_code 來進(jìn)行切換的,現(xiàn)在不知道怎么做才能遍歷出每個時間段的天氣圖片.圖片都放在weather-icon 文件夾下了.都是以cond_code 對應(yīng)碼命名的.
求幫助.