【04】vue.js — 百度搜索数据案例
2017-09-06 14:30
501 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript" src="js/vue-resource.js" ></script> <style> .gray { background-color: gray; } </style> <script> window.onload = function(){ new Vue({ el: '#box', data: { myData: [], t1: '', now: -1 }, methods: { get: function(ev) { if(ev.keyCode==38 || ev.keyCode==40)return; if(ev.keyCode==13){ window.open('https://www.baidu.com/s?wd='+this.t1); this.t1=''; } this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ wd: this.t1 },{ jsonp: 'cb' }).then(function(res){ this.myData = res.data.s; },function(){ }); }, changeDown: function(){ this.now++; if(this.now==this.myData.length) this.now = -1; if(this.myData.length == 0) return; this.t1=this.myData[this.now]; }, changeUp: function(){ this.now--; if(this.now==-2)this.now=this.myData.length-1; if(this.myData.length == 0) return; this.t1=this.myData[this.now]; } } }); } </script> </head> <body> <div id="box"> <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()"> <ul> <li v-for="value in myData" :class="{gray:$index==now}"> {{value}} </li> </ul> <p v-show="myData.length==0">暂无数据...</p> </div> </body> </html>
相关文章推荐
- Vue实例——百度搜索案例
- 大数据IMF传奇行动绝密课程第95课:通过SparkStreaming的window操作实战模拟新浪微博、百度、京东等热点搜索词案例实战
- Js 最原始的表单验证 |将数据提交到百度搜索
- 利用autocomplete.js实现仿百度搜索效果(ajax动态获取后端[C#]数据)
- vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
- 03、vue.js 之数据渲染
- vue.js中使用vueResource向后台请求数据时出现跨域访问失败的问题
- 怎么样把百度搜索引入自己的网站JS实现(附源代码)
- Vue.js 数据更新后,视图不会更新的异常
- 以纯面向对象的JS编写最基本的数据字典案例
- Vue.js-04:第四章 - 页面元素样式的设定
- JQuery+JS实现仿百度搜索结果中关键字变色效果
- 初始Vue.js--数据的绑定(一)
- 百度搜索效果(服务器来获取数据)
- Vue.js——基于$.ajax实现数据的跨域增删查改
- JS实现同时搜索百度和必应的方法
- vue.js通过自定义指令实现数据拉取更新的实现方法
- vue.js 表格分页ajax 异步加载数据
- 基于vue.js 2.0的百度天气应用
- Vue.js-数据驱动的组件化