vue实现百度搜索功能

本文实例为大家分享了某视频剪辑软件实现百度搜索功能的具体代码，供大家参考，具体内容如下

最终效果：

Baidusearch.vue所有代码：

模板div class=' container ' id=' app ' div class=' page-header ' H2 class=' text-center text-primary '百度搜索案例/H2/div表单操作=' div class=' form-group '输入v-model=' wd ' @ keyup=' keyup($ event)' @ keyup=' keyup($ event)' type=' text ' class=' form-control '/ul class=' list-group ' Li class=' list-group-item list-item-text ' v-for='(item，index)在arr ' : class=' { ' list-group-item-info ' : index==list index }搜索的关键词arr:[]，//用于储存关键词的搜索词条listIndex:-1//设置初始索引，数组从0开始，因此初始成-1 } }，methods:{ //这个函数我们在投入标签输入关键词的时候不断的给百度服务器发送请求获取搜索词条，并且不断的复制给数据中的数组arr keyup(事件){ //如果我按的是上下键，那么就不发送请求了console.log(事件);if(事件。键码==38 | |事件。键码==40 | |事件。键码==13)返回；var URL=' https://sp 0。百度。com/5a 1 fa zu 8 aa 54 nxg ko9 wtan F6 hy/su ' this .$http.jsonp(url，{ params:{ wd:this.wd }，jsonp:'cb' }).然后(RES={控制台。日志(RES)；这个。arr=RES .数据。s；//把百度服务器返回的数据传给到达)数组}) }, //监听鼠标的点击事件//如果鼠标点击某一行的文字，则点击事件中的事件。explicituriginaltargett。数据代表关键词//如果点击某一行的空白处，则点击事件中的事件。explicituriginaltargett。内部文本代表关键词//大家可以通过console.log(事件)来查看关键词所在的位置点击(事件){控制台。日志(事件)；if(事件。explicitrinaltargett。数据！=undefined){ this。wd=事件。explicitrinaltargett。数据；窗户。open(' https://www .百度。com/s？wd='这个。wd)；} else if(事件。explicitrinaltargett。内心的文字！=undefined){ this。wd=事件。explicitrinaltargett。innertext窗户。open(' https://www .百度。com/s？wd='这个。wd)；} }, //监听键盘的事件//如果按下来，则增加当前列表索引1,因此arr[this.listIndex]就能代表当前的词条//我们通过对列表索引的修改来得到当前词条在到达)中的索引，然后就可以得到词条的具体信息，然后发送请求了向下键(事件){ console.log(事件);//下键：40 上键：38 if(event.keyCode==38){ //按的上键这个。ListIndex-；如果(这个。listindex 0){ this。listindex=this。由…改编长度-1；}这个。wd=这个。arr[这个。列表索引]；} else if(event.keyCode==40){ //说明你按的是下键这个。列表索引；如果(这个。列出这个索引。由…改编长度-1){这个。列表索引=0；}这个。wd=这个。arr[这个。列表索引]；}else if(event.keyCode==13){ //如果你按的是进入，那么就跳转到百度搜索结果窗户。open(' https://www .百度。com/s？wd='这个。wd)；} } } }/脚本样式范围/样式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。