使用 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 相关文章推荐
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 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
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
PHP垃圾回收机制简单说明
2010/07/22 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
Vue 使用中的小技巧
2018/04/26 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
Numpy数组的保存与读取方法
2018/04/04 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
大客户销售经理职责
2013/12/04 职场文书
教育课题研究自我鉴定范文
2013/12/28 职场文书
小学生打架检讨书
2014/01/26 职场文书
搞笑结婚保证书
2015/05/08 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
MySQL插入数据与查询数据
2022/03/25 MySQL