🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
豆瓣电影数据拿取与渲染 ![](https://box.kancloud.cn/f7d543e04c896f3273e0e3a00cbc0f4f_1861x791.gif) ~~~ <!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"> <title>Document</title> <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> <style> *{ margin: 0; padding: 0; } #movie{ width: 95%; margin-left: auto; margin-right: auto; } li{ list-style-type: none; float: left; width: 14.2857%; padding-top: 10px; text-align: center; } img{ width: 95%; 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 = 'http://douban.uieee.com/v2/movie/top250'; this.$http.jsonp(url).then(res=>{ let subjects = res.body.subjects; subjects.forEach(element => { let title = element.title; if(title.length>8){ title = title.slice(0,8); } let image = element.images.small; let temp={}; temp.title = title; temp.image = image; self.list.push(temp); }); }) } }) </script> </body> </html> ~~~