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 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
angular动态表单制作
Feb 23 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 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
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
PHP反射API示例分享
2016/10/08 PHP
javascript 隔行换色函数代码
2010/10/24 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
Python实现包含min函数的栈
2016/04/29 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
公司财务总监岗位职责
2013/12/14 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL