1 <template>
2 <div id="app">
3 <div id="box">
4 <input type="text" name="" id="" v-model="content" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up="changeUp()"/>
5 <ul>
6 <li v-for="(item, index) in myData" :class="{grey: index==now}">
7 {{item}}
8 </li>
9 </ul>
10 </div>
11 </div>
12 </template>
13
14 <script>
15 import Vue from 'vue'
16 import Axios from 'axios'
17 Vue.prototype.$axios = Axios
18 const jsonp = require('jsonp')
19 export default {
20 name: 'App',
21 data(){
22 return {
23 myData: [],
24 content: '',
25 now: -1,
26 }},
27 methods:{
28 get(ev) {
29 window.baidu = {
30 sug: (data)=>this.myData = data.s
31 };
32 if (ev.keyCode == 38 || ev.keyCode == 40) {
33 return;
34 }
35 if(ev.keyCode == 13) {
36 window.open('https://www.baidu.com/s?wd=' + this.content);
37 this.content = '';
38 }
39 jsonp('baidu/su?wd=' + this.content,null,(err,data)=>{
40 if(err){console.log(err)}
41 else{console.log('success')}
42 })
43 this.now=-1
44 },
45 changeDown() {
46 this.now++;
47 if(this.now == this.myData.length) {
48 this.now = 0;
49 }
50 this.content = this.myData[this.now];
51 },
52 changeUp() {
53 this.now--;
54 if (this.now == -1) {
55 this.now = this.myData.length-1;
56 }
57 this.content = this.myData[this.now];
58 }
59 }
60 }
61 </script>
62 <style>
63 #box{
64 width: 200px;
65 background-color: #d3dede;
66 margin: 0 auto
67 }
68 input{
69 width: 194px;
70 font-size: 15px;
71 margin: 5px 0
72 }
73 ul{
74 list-style:none;
75 padding: 0
76 }
77 .grey{
78 background-color: gray
79 }
80 </style>
config下index.js文件配置：
proxyTable: {
'/baidu': {
target: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/',//設置你調用的接口域名和端口號
changeOrigin: true,
pathRewrite: {
'^/baidu': '/'
//這里理解成用‘/baidu’代替target里面的地址，后面組件中我們掉接口時直接用baidu代替
}
},
},
