<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度下拉框</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<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实现百度下拉框的更多相关文章

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

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

  2. Vue实现树形下拉框

    Vue自身并没有实现树形下拉框的组件,找了很多资料,最后在Github上找了个插件vue-treeselect,功能还是比较全的,模糊搜索.多选.延迟加载.异步搜索.排序,自定义.Vuex支持等等.这 ...

  3. vue js select下拉框

    <template> <ul id="select"> <li> <div class="select-head"&g ...

  4. vue 点击下拉框

    data: { hide:false, zhi:"全部" }, <div class="item"> <div class="c2c ...

  5. Vue.js模拟百度下拉框

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

  6. dedecms首页搜索 添加仿百度下拉框

    1:找到uploads/templets/default/head.htm 2: 找到 <input name="q" type="text"  clas ...

  7. vue中使用cookie记住用户上次选择(本次例子中为下拉框)

    最近工作中碰到一个需求,添加一条数据时,自动记住上次选择的下拉框的数据,刚开始觉得没思路,后来请教了项目组长,组长直接一句,这不很简单吧,直接用cookie,我:....... 好吧,都王的差不多了, ...

  8. vue实现下拉框全选和输入匹配

    实际项目中的一个需求: 点击文本框,弹出带有复选框的选项,然后获取选中项的数据,传给后面的一个功能.在文本框输入内容,也会动态的匹配下拉列表,并且列表带有全选功能. 朴素的效果图: 我选择了用vue实 ...

  9. Vue.js组件之联动下拉框

    Html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

随机推荐

  1. js的作用主要这么几个

    js的作用主要有这么几个表单验证:网页上,用户输入的信息需要进行验证,在客户端验证,可以减少对服务器端的压力.所以,你应该把握正则表达式方面的知识.网页特效:页面上很多特效是非常好的,能产生很好的用户 ...

  2. VMware安装CentOS7_1511 mini版本

    这次安装使用的是 CentOS7_1511_mini 如果没有点击下载 点击下载

  3. python根据已有数据库生成model.py

    有时我们需要根据已存在的数据库进行django开发时,手写model.py是不现实的 先执行下面的语句,在命令行终端会输出所有表的类 python .\manage.py inspectdb 检查无误 ...

  4. 25、Nginx常见典型故障

    1.为什么nginx里面有的是浏览器渲染出的页面,有的时候就变成下载文件? 这个一个取决于服务端nginx,一个取决于你浏览器.在Nginx服务端的配置文件目录下,有一个mime.types 文件,内 ...

  5. 第十篇.6、python并发编程之IO模型

    一 IO模型介绍 为了更好地了解IO模型,我们需要事先回顾下:同步.异步.阻塞.非阻塞 同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非 ...

  6. Darknet版YOLO安装与配置

    Darknet配置和安装 1. 安装显卡驱动 首先查看一下自己的电脑需要怎样的驱动,我们可以先到 http://www.nvidia.com/Download/index.aspx 查询下我们需要的是 ...

  7. Mongodb的基本操作-数据库 集合 文档的增删改查

    数据库操作: //查看有哪些数据库 > show dbs local  0.078GB mydb   0.078GB //use操作将切换到一个数据库 如果数据库存在将直接切换 如果不存在 那么 ...

  8. 对Spring Boot 及Mybatis简单应用

    因为没有系统的学习过SpringBoot,在对照一个别人的SpringBoot项目,进行简单的搭建及使用. 1.首先创建SpringBoot项目之后,这里会有默认的启动类,基本不需要配置,在类的上边有 ...

  9. 解决 Maven项目进行编译( mvn compile )时出现的错误

    错误信息: 在 pom.xml 文件 设置一下Maven的属性 <!--Maven 属性--> <properties> <!--项目的编码格式--> <pr ...

  10. 关于在react里面es6构建类的时候,一些开始的问题

    一般来说我们写react代码,个人习惯 这个里面没有constructor和super的,这样写也没啥问题.因为他会默认加上 但是有的时候有人会加上这两个 可以不写constructor,一旦写了co ...