<!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. 自然语言处理工具python调用hanlp中文实体识别

    Hanlp作为一款重要的中文分词工具,在GitHub的用户量已经非常之高,应该可以看得出来大家对于hanlp这款分词工具还是很认可的.本篇继续分享一篇关于hanlp的使用实例即Python调用hanl ...

  2. sparkSQL以JDBC为数据源

    一.环境准备 安装oracle后,创建测试表.数据: create table test ( username varchar2(32) primary key , password varchar2 ...

  3. gtid error set test

    1.从库报主键重复(Errno: 1062)#create test data 1062create table t1 (id tinyint not null primary key,ename v ...

  4. php .htaccess文件使用详解

    1..htaccess文件使用前提 .htaccess的主要作用就是实现url改写,也就是当浏览器通过url访问到服务器某个文件夹时,作为主人,我们可以来接待这个url,具体地怎样接待它,就是此文件的 ...

  5. WPF DataGrid添加编号列

    WPF DataGrid添加编号列? 第一步:<DataGridTemplateColumn Header="编号" Width="50" MinWidt ...

  6. sql重置标识

    DBCC CHECKIDENT    ( 'table_name'        [ , { NORESEED                | { RESEED [ , new_reseed_val ...

  7. vue cli 配置信息说明

    摘自csdn http://blog.csdn.net/hongchh/article/details/55113751

  8. Java 线程转储 [转]

    http://www.oschina.net/translate/java-thread-dump java线程转储 java的线程转储可以被定义为JVM中在某一个给定的时刻运行的所有线程的快照.一个 ...

  9. 基于element-ui的多选下拉框和tag标签的二次封装

    前言: 今年这大半年我主要负责公司的后台教务管理的开发,这个管理系统目前主要是给公司的内部人员去配置公司的核心项目(例如:熊猫小课)的所有数据,例如课程的配置.课程期数的配置.课程版本的配置.活动的配 ...

  10. Java性能调优：利用JMC分析性能

    Java性能调优作为大型分布式系统提供高性能服务的必修课,其重要性不言而喻. 好的分析工具能起到事半功倍的效果,利用分析利器JMC.JFR,可以实现性能问题的准确定位. 本文主要阐述如何利用JMC分析 ...