vue渲染html数据,综合应用（从豆瓣上取数据，渲染到html中）

~~~

Document

* {

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;

}

• {{ item.title }}

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);

})

}

})

~~~