<!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. python的加密方式

    MD5加密 这是一种使用非常广泛的加密方式,不可逆的,在日常字符串加密中经常会用到,下面我简单介绍一下这种方式,主要用到Python自带的模块hashlib,测试代码如下,先创建一个md5对象,然后直 ...

  2. Spring Boot 实际操作

    1.什么是springboot 2.springboot的很多默认编码方式都是utf-8,真是福利啊. 3.spring boot如何启动和访问和MocMvc测试 4.开发环境的调试热启动 5.app ...

  3. 点击切换JS

    $(function(){ var tabnav = $("#tab-nav ul li"); tabnav.click(function(){ $(this).addClass( ...

  4. mysql5.7主从复制及相关注意点！

    首先在两台不同IP的服务器安装相同版本的mysql(也可以docker 用 network模式).例如 主数据库(master) 178.18.0.2 my.cnf的设置(一般在/etc/mysql/ ...

  5. 了解并安装Nginx

    公司使用nginx作为请求分发服务器,发现本人在查看nginx配置上存在些许困难,故仔细阅读了陶辉的<深入理解nginx模块开发与框架>第一部分,并作此记录. 了解 我根据书上的思路来了解 ...

  6. Dell服务器硬件监控，使用omreport出现object not found 错误解决

    一.监控告警 登录目标主机,查看dataeng服务 [root@push-- src]# systemctl status dataeng ● dataeng.service - LSB: Syste ...

  7. 在linux环境下安装oracle的问题记录

    问题1 xhost:unable to open display 解决办法: 在linux虚拟机本机打开终端,执行 [root@bogon ~]# DISPLAY=:0.0;export DISPLA ...

  8. Codeforces Round #581 (Div. 2) B. Mislove Has Lost an Array （贪心）

    B. Mislove Has Lost an Array time limit per test1 second memory limit per test256 megabytes inputsta ...

  9. 使用cordova调用相机在相机中添加蒙版

    变态的需求,要在cordova调起得相机上加入一拍照的轮廓,在cordova的插件中拿不到拍照的方法,起初选用UIImagePickerController的cameraOverlayView属行,结 ...

  10. A*算法实现（图形化表示）——C++描述

    概要 A*算法是一种启发式寻路算法,BFS是一种盲目的无目标的搜索算法,相比于BFS,A*算法根据适应度构建优先队列,根据适应度值可以很好的向目标点移动,具体详情,请看搜索相关文档,我在只是实现了在无 ...