使用 Vue.js 仿百度搜索框的实例代码


Posted in Javascript onMay 09, 2017

整理文档,搜刮出一个使用 Vue.js 仿百度搜索框的实例代码,稍微整理精简一下做下分享。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Vue demo</title>
  <style type="text/css">
  .bg {
    background: #ccc;
  }
  </style>
  <script src="https://cdn.bootcss.com/vue/2.1.7/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-resource/1.3.1/vue-resource.min.js"></script>
  <script type="text/javascript">
  window.onload = function() {
    new Vue({
      el: '#box',
      data: {
        inputText: '',
        text: '',
        nowIndex: -1,
        result: []
      },
      methods: {
        show: function(ev) {
          if (ev.keyCode == 38 || ev.keyCode == 40) {
            if (this.nowIndex < -1){
              return;
            }
            if (this.nowIndex != this.result.length && this.nowIndex != -1) {
              this.inputText = this.result[this.nowIndex];
            }
            return;
          }
          if (ev.keyCode == 13) {
            window.open('https://www.baidu.com/s?wd=' + this.inputText, '_blank');
            this.inputText = '';
          }
          this.text = this.inputText;
          this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
            params: {
              wd: this.inputText
            },
            jsonp: 'cb'
          }).then(res => {
            this.result = res.data.s;
          })
        },
        down: function() {
          this.nowIndex++;
          if (this.nowIndex == this.result.length) {
            this.nowIndex = -1;
            this.inputText = this.text;
          }
        },
        up: function() {
          this.nowIndex--;
          if (this.nowIndex < -1){
            this.nowIndex = -1;
            return;
          }
          if (this.nowIndex == -1) {
            this.nowIndex = this.result.length;
            this.inputText = this.text;
          }
        }
      }
    });
  }
  </script>
</head>

<body>
  <div id="box">
    <input type="text" placeholder="请输入搜索内容" v-model='inputText' @keyup='show($event)' @keydown.down='down()' @keydown.up.prevent='up()'>
    <ul>
      <li v-for="(item, index) in result" :class='{bg: index==nowIndex}'>
        {{item}}
      </li>
    </ul>
  </div>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
ExtJS DOM元素操作经验分享
Aug 28 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
浅谈vue加载优化策略
Mar 19 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 #Javascript
使用ES6语法重构React代码详解
May 09 #Javascript
JQuery实现定时刷新功能代码
May 09 #jQuery
React.js中常用的ES6写法总结(推荐)
May 09 #Javascript
js上传图片预览的实现方法
May 09 #Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 #Javascript
Vue2单一事件管理组件通信
May 09 #Javascript
You might like
当海贼王变成JOJO风
2020/03/02 日漫
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
Smarty模板类内部原理实例分析
2019/07/03 PHP
js加解密 脚本解密
2008/02/22 Javascript
JS 判断代码全收集
2009/04/28 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
python encode和decode的妙用
2009/09/02 Python
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
Python3.9新特性详解
2020/10/10 Python
python用700行代码实现http客户端
2021/01/14 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
十佳班主任事迹材料
2014/01/18 职场文书
《观舞记》教学反思
2014/04/16 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
承诺函格式模板
2015/01/21 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js