>技術鏈：html+css+js+vue+vue-resource >API接口：https://douban.uieee.com/v2/movie/top250 >實現效果：  >html代碼 ``` <div id="movie"> <ul> <li v-for="item in list"> <img v-bind:src="item.img" alt=""> <p>{{ item.title }}</p> </li> </ul> </div> ``` >css代碼 ``` * { margin: 0; padding: 0; } #movie { width: 1200px; margin: 30px auto auto auto; } li { list-style-type: none; width: 200px; float: left; margin: 20px; } img { width: 100%; height: 280px; } ``` >js代碼 ``` new Vue({ el: '#movie', data: { list: [] }, beforeCreate(){ var self = this; // var url = 'https://douban.uieee.com/v2/movie/top250' var url = 'https://douban.uieee.com/v2/movie/top250?start=0&count=40' this.$http.jsonp(url).then(res=>{ // console.log(res); let subjects = res.body.subjects; subjects.forEach(element => { let img = element.images.small; let title = element.title; let temp = {}; temp.img = img; temp.title = title; self.list.push(temp); }); }) } }) ``` --------- 整個項目以上傳至[github](https://github.com/MrXuxu/H5_demo/tree/master/Vue%E9%A1%B9%E7%9B%AE)