> 函数必须在Vue中的methods属性下添加
~~~
methods: {
$http.jsonp(url).then(res=>{
this.handleData(res.body);
console.log(res);
})
}
~~~
~~~
<!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/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<div id="test">
<input type="text" @keyup.enter="submit">
<p>{{title}}</p>
<img v-bind:src="url" alt="">
</div>
<script>
new Vue({
el: "#test",
data: {
title: "三体",
url: "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2248627938.webp"
},
methods: {
submit(event) {
var self = this;
var value = event.target.value;
let url = `http://douban.uieee.com/v2/movie/search?q=${value}&count=1`;
$.ajax({
url,
type: "get",
dataType: "jsonp",
success: function (res) {
self.handleData(res);
},
error: function(xhr){
document.body.innerHTML = xhr.status;
}
})
},
handleData(res) {
let title = res.subjects[0].title;
let url = res.subjects[0].images.small;
self.title = title;
self.url = url;
}
}
})
</script>
</body>
</html>
~~~
