夜光序言:
他,粗布黑衫,撑一支长篙,悠悠然摆着渡船。
时而低垂眼睑,凝视碧波荡漾,时而遥望远方,望穿群山叠峦。
翘首以盼,烟云蒙蒙,烟波江上的亭阁影影绰绰,一个曼妙的身姿隐约闪现,更是为这幅美卷添了色彩。
正文:
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>夜光:灵活使用之前学的,创建几个简单实例</title>
</head>
<body>
<div id="app">
靓仔/靓女:请输入关键字:<input type="text" v-model="keyword" @keyup="sendJsonP(keyword)">
<ul>
<li v-for="r in result">{{r}}</li>
</ul>
</div>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<!--<script src="../js/vue.js"></script>-->
<script type="text/javascript">
window.onload = function () {
new Vue({
el: '#app',
data: {
keyword: '',
result: ''
},
methods: {
sendJsonP(keyword) {
let url = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web';
this.$http.jsonp(url, {
params: {
wd: keyword
},
jsonp: 'cb'//jsonp默认是callback,百度缩写成了cb,所以需要指定下 }
}).then(res => {
if (res.data.g) {
this.result = res.data.g.map(x => x['q']);
} else {
this.result = [];
}
});
}
}
});
}
</script>
</body>
</html>