<!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. win2008 server 多IP配置

    本人服务器环境   win8 + phpstudy   一个服务器多个IP 以前都是用linux,买了几套源码结果都是win8server 服务器+phpstudy. 渐渐也就随大流了.懒的去琢磨 一 ...

  2. 死磕!Windows下Apache+PHP+phpmyadmin的配置

    环境配置真的很烦很费时间,稍不小心就会出错,这是一个鸡肋体力劳动,耐心和忍耐少不了.这个资料已经非常详细了,其中变量和路径不是百分百吻合但是意思已经很清楚了.剩下的就是耐心的执行和琢磨了. 一.  A ...

  3. Java知识之运算符篇

    运算符 算术运算符:+.-.*./ 和 %,两个整数相除,结果还是整数. 赋值运算符:=.+=.-=.*=./=.%=.&=.|=.~=.^=.<<=.>>= . &g ...

  4. 基于Html的SEO(很基础,更是前端必须掌握之点)

    文章来源:百度文库   Html代码seo优化最佳布局,实例讲解     众所周知,搜索引擎对html代码是非常优化的,所以html的优化是做好推广的第一步.一个符合seo规则的代码大体如下界面所示. ...

  5. 如何在eclipse 里面调试java.lang包的代码

    1.  在Eclipse中,Window->Preferences->Java->Compiler,确保以下选项都勾选上 2. 在Eclipse中,Window->Prefer ...

  6. navicat for mysql 最简便的破解方法

    Navicat 破解工具 1.安装Navicat软件 安装成功之后进行破解. 然后选择刚刚安装的Navicat安装路径下找到navicat.exe文件,点击选择即可激活 成功.  (注意此步骤解析的是 ...

  7. PopupWindows 在2.3.3下报java.lang.NullPointerException

    03-05 01:20:56.040: E/AndroidRuntime(1396): java.lang.NullPointerException 03-05 01:20:56.040: E/And ...

  8. is与==

     is和==的区别 1. id() 通过id()我们可以查看到⼀一个变量表示的值在内存中的地址. a1 = 100 b1 = 100 print(id(a1),id(b1)) #14071247240 ...

  9. [UE4]第一人称与第三人称

    一.给Character添加一个SkeletalMesh,并设置为第三人称模型.并设置自己看不到该模型. 二.添加给骨骼的右手添加一个Socket插槽用来挂载武器 三.判断当前角色是否被本地Contr ...

  10. 阿里云直播服务 sdk demo php

    [php] <?php /** * Created by PhpStorm. * User: Administrator * Date: 2016/12/8 0008 * Time: 11:05 ...