<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <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; //上下选择切换停止请求

                         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;

                         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>

实现效果：

Vue.js模拟百度下拉框的更多相关文章

  1. vue实现百度下拉框

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. 【亲测好用！】shell批量采集百度下拉框关键词

    [亲测好用!]shell批量采集百度下拉框关键词 SEO工具  方法  11个月前 (11-18)  2153浏览 3条评论 百度已收录 一直想写一篇用shell采集百度下拉框关键词的教程,个人感觉用 ...

  3. bootstrap-multiselect.js多选下拉框初始化时默认选中初始值

    bootstrap-multiselect.js多选下拉框默认值设置 一.案例数据格式  二.HTML代码 <select id="msgRoles" multiple=&q ...

  4. vue 表格中的下拉框单选、多选处理

    最近在用vue做前后端分离,需要在表格中用到下拉框,由于需求变动,从最开始的单选变为多选,折腾了许久,记录一下,供后人铺路 vue 中的表格下拉框单选 collectionsColnumOptions ...

  5. 用div，ul，input模拟select下拉框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. div模拟的下拉框特效

    随笔- 4 文章- 0 评论- 0 ? <style type="text/css"> body, ul, li { margin: 0; padding: 0; fo ...

  7. div模拟的下拉框特效jquery

    从网上找来的,感觉不错就拿来分享下 <style type="text/css"> body, ul, li { margin: 0; padding: 0; font ...

  8. JS为Select下拉框添加输入功能

    JavaScript使用parentNode.nextSibling.value实现的本功能,实际上你会发现网页上有两个控件元素,一个是Select,一个是input,使用CSS将input覆盖于se ...

  9. jquery实现模拟select下拉框效果

    <IGNORE_JS_OP style="WORD-WRAP: break-word"> <!DOCTYPE html PUBLIC "-//W3C// ...

随机推荐

  1. Git-.gitignore配置

    .gitignore文件配置:keil工程文件类型模板 # reference to Keil->help->µVision User's Guide->Appendix->B ...

  2. 排序算法<No.4>【基数排序】

    由于春节,以及项目要上线的原因,导致这期的算法博文跟进的有点慢,内疚! 今天要介绍的是排序算法中的基数排序(Radix Sort),这类排序也是一个分而治之的排序,是对桶排序的一个升级和改造,也是稳定 ...

  3. 弄清SDI显示工程中的每一个信号，每一个逻辑

    弄清SDI显示工程中的每一个信号,每一个逻辑 1. FIFO外部逻辑控制 FIFO的读和写在不同的时钟域,所以读和写的控制逻辑应当分开写在不同的两个always块语句中. 2.播出端复位信号的产生 : ...

  4. NP完全性理论与近似算法

    转自:http://www.cnblogs.com/chinazhangjie/archive/2010/12/06/1898070.html 一.图灵机 根据有限状态控制器的当前状态及每个读写头读到 ...

  5. 黄聪：CR2格式批量转换JPG（美图看看）

  6. Eclipse 安装阿里巴巴代码规范插件

    好像是要求jdk1.8+ ,1.8以下的没试过 第一步: 选择 Install New Software  第二步: https://p3c.alibaba.com/plugin/eclipse/up ...

  7. IE10 下系统出现Unable to get property 'PageRequestManager' of undefined or null reference错误

    在本地调试时没有任何问题,上传到测试服务器(win2003 framework 4.0)后打开网站出现Unable to get property 'PageRequestManager' of un ...

  8. 固态硬盘使用简要手册——windows平台

    第一步,请安装它. 第二步,请关闭磁盘整理功能,如图 详细:控制面板--管理工具--任务计划程序 打开界面,设置如下 图1 第三步:预读(Superfetch)和快速搜索(Windows Search ...

  9. C#、AE开发入门之打开TIFF文件并显示

    继上篇文章,本次打开TIFF文件,附上源码及其注释 private void button2_Click(object sender, EventArgs e) { axMapControl1.Cle ...

  10. redis（redis概念，运用场景，如何操作基本数据类型）

    什么是redis:Nosql一种缓存数据库 redis可以干什么:redis可以减轻对数据库的请求压力如果不使用缓存:客服端->控制层->业务层->dao层使用缓存:客服端-> ...