<!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. Linux 高级文本处理命令

    1.2.1 cut命令 cut命令可以从一个文本文件或者文本流中提取文本列. cut语法 [root@www ~]# cut -d'分隔字符' -f fields     ## 用于有特定分隔字符 [ ...

  2. [转]阿里云CentOS 7.1使用yum安装MySql5.6.24

    阿里云CentOS 7.1使用yum安装MySql5.6.24 作者:vfhky | 时间:2015-06-25 09:43 | 分类:web 在前面两篇文章<2015博客升级记(四):Cent ...

  3. 线程event事件函数实现红绿灯

    #!/usr/bin/env python # -*- coding: utf-8 -*- # author aliex-hrg import threading,time event = threa ...

  4. 53题看透java线程

    1) 什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器编程,你可以使用多线程对运算密集型任务提速.比如,如果一个线程完成 ...

  5. 安装node.msi 格式的文件失败

    in10 安装node.msi格式的文件,出现2503 2502 错误码, win+x 打开 在命令提示符窗口中输入: msiexec /package "安装msi格式的文件的全路径&qu ...

  6. P2412高精度减法

    传送门 因为忘了带书回家,所以因为这道题我卡了半小时所以写篇博客“纪念”下 高精度减法中,如果被减数比减数小,就要用减数减去被减数.接下来的判断就是本题的核心.直接用strcmp是不行的,例如100与 ...

  7. P1706 全排列问题

    题解:(其实我认为它就是个循环) #include<iostream> #include<cstdio> #include<iomanip> using names ...

  8. PAT 乙级 1046 划拳(15) C++版

    1046. 划拳(15) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 划拳是古老中国酒文化的一个有趣的组成部分 ...

  9. 若是汉字的一半，就舍弃这个汉字输出，例如：“js3范ad啊asd”，截取4，则输出：“js3”

    package com.jt.test.redis; import org.junit.Test; /* 题目要求 * 编码:GBK,一个英文字符占一个字节,一个汉字占2个字节 * 随机给定一个字符串 ...

  10. Consul之：服务健康监测

    服务注册 - 服务进程在注册中心注册自己的位置.它通常注册自己的主机和端口号,有时还有身份验证信息,协议,版本号,以及运行环境的详细资料. 服务发现 - 客户端应用进程向注册中心发起查询,来获取服务的 ...