vue实现百度下拉列表交互操作示例


Posted in Javascript onMarch 12, 2019

本文实例讲述了vue实现百度下拉列表交互操作。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com vue百度下拉列表</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()">
    <!--搜索框的光标会默认定位到文字前面,这里@keydown.up.prevent阻止默认事件-->
    <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实现百度下拉列表交互操作示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
js 调用父窗口的具体实现代码
Jul 15 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
javascript常用函数(1)
Nov 04 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 #Javascript
深入理解Node内建模块和对象
Mar 12 #Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 #Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 #Javascript
React中this丢失的四种解决方法
Mar 12 #Javascript
使用koa2创建web项目的方法步骤
Mar 12 #Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 #Javascript
You might like
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
如何让CI框架支持service层
2014/10/29 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
Python中字符串的格式化方法小结
2016/05/03 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
python递归实现快速排序
2018/08/18 Python
python实现操作文件(文件夹)
2019/10/31 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
行政助理岗位职责
2013/11/10 职场文书
中级会计职业生涯规划范文
2014/01/16 职场文书
美术指导求职信
2014/03/17 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
创业计划书之便利店
2019/09/05 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis