Vue电影数据获取渲染 · VUE（我才是正主）

## Vue-resource获取数据 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.5.1/vue-resource.js"></script> <title>Document</title> <style> * { margin: 0; padding: 0; } #movie { width: 1200px; margin: 30px auto auto auto; } li { list-style-type: none; float: left; width: 200px; margin: 20px; } img { width: 100%; height: 280px; } </style> </head> <body> <div id="movie"> <ul> <li v-for="item in list"> <img v-bind:src="item.image" alt=""> <p>{{ item.title }}</p> </li> </ul> </div> <script> 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; console.log(subjects); //element = subjects[index] subjects.forEach(element => { // console.log(element.title); let title = element.title; // console.log(element.images.small); let image = element.images.small; let temp = {}; temp.title = title; temp.image = image; // console.log(temp); self.list.push(temp); }); console.log(self.list); }) } }) </script> </body> </html> ```