Vue之仿百度搜索框
来源:互联网 发布:同花顺智能交易软件 编辑:程序博客网 时间:2024/05/20 12:48
先上代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .gray{ background: #ccc; } </style> <script src="vue.js"></script> <script src="vue-resource.js"></script> <script> window.onload=function(){ new Vue({ el:'body', data:{ myData:[], t1:'', now:-1 }, methods:{ get:function(ev){ if(ev.keyCode==38 || ev.keyCode==40)return; 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; this.t1=this.myData[this.now]; }, changeUp:function(){ this.now--; if(this.now==-2)this.now=this.myData.length-1; 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>
1.使用v-show:数据长度为0的时候显示‘暂无数据’
2.使用jsonp获取数据
3.键盘事件keydown.down keydown.up按键向上向下的按键
阅读全文
0 0
- Vue之仿百度搜索框
- Vue 仿百度搜索
- 二五、vue仿百度搜索框
- vue 简单仿写百度搜索
- 仿百度搜索框
- 仿百度联想搜索框
- 使用Bootrap和Vue实现仿百度搜索功能
- Jquery插件之仿百度感应搜索
- 仿百度智能提示搜索框
- easyui仿百度搜索提示框
- 用jq实现仿百度搜索框
- 原生js仿百度搜索框
- 仿百度搜索代码
- 仿百度搜索
- Vue 百度搜索
- vue.js仿简易搜索
- Android基础教程(八)之仿百度谷歌搜索自动提示框-----AutoCompleteTextView的应用
- Android基础教程(八)之仿百度谷歌搜索自动提示框-----AutoCompleteTextView的应用
- Circle类
- java集合宏观讨论
- JAVA中foreach的运用
- 最简单的短信验证
- 打来eclipse出现错误An error has occurred. See the log file C:\Users\lenovo\eclipse-workspace\.metadata\.lo
- Vue之仿百度搜索框
- Android Audio Throttle分析
- 吐槽出入react踩过的“坑”
- 51Nod-1443-路径和树
- Linux设备驱动程序的简单Makefile
- M100ubuntu激活测试
- text输入对应值select 也跟着改变
- 215. Kth Largest Element in an Array
- HVDC系统仿真 基于MMC换流站 PSCAD平台