<!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. Hanlp在java中文分词中的使用介绍

    项目结构 该项目中,.jar和data文件夹和.properties需要从官网/github下载,data文件夹下载 项目配置 修改hanlp.properties: 1 #/Test/src/han ...

  2. Hanlp实战HMM-Viterbi角色标注中国人名识别

    这几天写完了人名识别模块,与分词放到一起形成了两层隐马模型.虽然在算法或模型上没有什么新意,但是胜在训练语料比较新,对质量把关比较严,实测效果很满意.比如这句真实的新闻“签约仪式前,秦光荣.李纪恒.仇 ...

  3. 虚拟机ubuntu新增挂载点进行磁盘扩展

    参考: http://m.blog.csdn.net/blog/pcsxk/38501579 一.vmware下扩展原来的磁盘空间 这个比较直观 1.关机状态下,选择磁盘->实用工具->扩 ...

  4. 抓包及分析（wireshark&tcpdump）

    1.简介 Wireshark是一个网络协议检测工具,支持Windows平台和Unix平台,我一般只在Windows平台下使用Wireshark,如果是Linux的话,我直接用tcpdump了,因为我工 ...

  5. ASP.NET中使用JSON方便实现前台与后台的数据交换

    ASP.NET中使用JSON方便实现前台与后台的数据交换 发表于2014/9/13 6:47:08  8652人阅读 分类: ASP.NET Jquery extjs 一.前台向后台请求数据 在页面加 ...

  6. ubuntu-docker入门到放弃（四）容器的导入导出

    上一次我们讲了如何搭建自己私有的镜像管理仓库,实际上我们使用的依然是别人或者公共的image,今天就来说说如何将自己定制化的images上传到自己的私有仓库中,以供符合自己业务场景的项目来使用,如:我 ...

  7. ALGO-115_蓝桥杯_算法训练_和为T(枚举)

    问题描述 从一个大小为n的整数集中选取一些元素,使得它们的和等于给定的值T.每个元素限选一次,不能一个都不选. 输入格式 第一行一个正整数n,表示整数集内元素的个数. 第二行n个整数,用空格隔开. 第 ...

  8. SolrServer SolrRequest

    SolrServer实现类 HttpSolrServer HttpSolrServer uses the Apache Commons HTTPClient to connect to solr. H ...

  9. C与C++的部分区别

    1.函数无形参情况 void test() { } int main() { test(,); ; } 在C语言中形参括号没有参数时代表接受任意多的参数,而在C++语言中代表void(无参数) 所以上 ...

  10. pj1--学生信息管理系统

    1.根据班上的情况做一个班级学生信息管理系统.包含功能有每日签到.学分管理.个人信息管理 2.要求:用winform+序列化(本地化)的技术实现,以教师机做服务器,要有文件保存.读取.还要有上传头像功 ...