Vue（九）小案例 - 百度搜索列表（跨域）
<!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>vue</title>
<style>
.current{
background-color:#ccc;
}
</style>
<script src="https://unpkg.com/vue"></script>
<script src="vue-resource/vue-resource.min.js"></script>
<script> window.onload=function(){
let app = new Vue({
el:'.container',
data:{
keyWord:'',
myData:{},
nowIndex:-1 //当前选中项的索引
},
methods:{
getData(e){
//如果按方向上下键，则不发送请求
if(e.keyCode==38||e.keyCode==40)
return; this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
params:{
wd:this.keyWord
},
jsonp:'cb' //百度使用的jsonp的参数名为 cb
}).then(response => {
console.log(response.body.s);
this.myData=response.body.s; //把数据存起来
},response => {
console.log('发送失败');
})
},
changeDown(){
this.nowIndex==this.myData.length-1?this.nowIndex = -1:this.nowIndex++;
this.keyWord=this.myData[this.nowIndex];
console.log(this.nowIndex,this.myData.length);
},
changeUp(){
this.nowIndex < 0?this.nowIndex = this.myData.length-1:this.nowIndex--;
this.keyWord=this.myData[this.nowIndex];
console.log(this.nowIndex,this.myData.length);
}
}
})
} </script> </head> <body> <div class="container">
<input type="text" v-model="keyWord" @keyup="getData($event)" @keydown.down="changeDown" @keydown.up.prevent="changeUp">
<!-- 把数据存起来展示 -->
<ul>
<li v-for="(value,index) in myData" :class="{current:index==nowIndex}">
{{value}}
</li>
</ul>
<p v-show="myData.length == 0">暂无数据</p>
</div> </body> </html>
效果：
Vue（九）小案例 - 百度搜索列表（跨域）的更多相关文章
- Vue如何在webpack设置代理解决跨域问题
在开发过程中我们请求数据有时候调用的是第三方接口,此时便会遇到一个问题:跨域限制.对于跨域问题的解释就不详细叙述了,要了解的请自行百度.一般跨域问题控制台会报这个错: ...
- vue 音乐App QQ音乐搜索列表最新接口跨域设置
在 webpack.dev.config.js中 'use strict' const utils = require('./utils') const webpack = require('webp ...
- Vue.js小案例、生命周期函数及axios的使用
一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...
- 填个小坑，Vue不支持IE8及以下，跨域ajax不支持IE9
这特么就尴尬了,说好的Vue支持IE8及以下的呢,引入jquery,测试IE个浏览器,IE9仍然显示不正常, 然而命令行测试Vue仍然存在, 数据回不来!数据回不来!数据回不来! 好吧 肉包子打狗$ ...
- vue学习过程总结（07） - vue的后台服务API封装及跨域问题的解决
以登录流程为例说明接口的封装. 1.登录调用后台的登录api 登录界面的代码 <template> <div class="login-page"> < ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
转自:https://www.cnblogs.com/keepfool/p/5648674.html 概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是loc ...
- React + fetch API + 百度地图api + 跨域 填坑
做项目遇到一个百度地图api 的跨域问题.由于使用fetch ,在调用类似 http://api.map.baidu.com/geocoder/v2/callback=renderReverse&am ...
- 【Vue+Node】解决axois请求数据跨域问题
项目基于Vue前端+Node后台,启动两个服务,请求数据时,端口不一致造成跨域报错: (No 'Access-Control-Allow-Origin' header is present on th ...
随机推荐
- WebClient 支持 gzip, deflate
低调偷偷的下别人数据 发现下出来乱码- 用F12看看请求,原来人家是用了gzip压缩的- 试着自己加个Heading wc.Headers.Add("Accept-Encoding" ...
- uva 11992
题意: 给定一个r*c(r<=20,r*c<=1e6)的矩阵,其元素都是0,现在对其子矩阵进行操作. 1 x1 y1 x2 y2 val 表示将(x1,y1,x2,y2)(x1<=x ...
- Asp.Net Mvc 返回类型总结
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- MyEclipse 8.6 下载
Downloads: MyEclipse 8.6 for Eclipse Galileo Windows http://downloads.myeclipseide.com/downloads/pro ...
- 需求：lr需要在一串数字中随机位置插入一个新数字的实现方式
效果如下: 需要用到sscanf()函数: 从一个字符串中读进与指定格式相符的数据. Action() { ],s2[],s3[]; int n=atoi(lr_eval_string(" ...
- 修改ini文件的批处理
用VBS更简单: vbs代码: On Error Resume Next Dim Fso,TxtFl,Str Set Fso = CreateObject("Scripting.FileSy ...
- 牛客挑战赛30 小G砍树 树形dp
小G砍树 dfs两次, dp出每个点作为最后一个点的方案数. #include<bits/stdc++.h> #define LL long long #define fi first # ...
- python 格式话-占位符
格式化输出:name = qjage = 30job = itsalary = 6000例1:字符串拼接方法,不建议,因为会在内存中开辟多块内存空间. info = '''---------- inf ...
- web实现下拉列表多选加搜索
实现如图所示的下拉多选还能带有搜索功能. <!DOCTYPE html> <html> <head> <title></title> < ...
- 黑色半透明镂空遮罩指引效果实现jQuery小插件
/*! * by zhangxinxu(.com) 2017-05-18 * 新版上线时候的黑色半透明镂空遮罩指引效果实现jQuery小插件 * 兼容到IE8+ * MIT使用协议,使用时候保留版权 ...