使用 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 相关文章推荐
javascript 表单验证常见正则
Sep 28 Javascript
js window.onload 加载多个函数的方法
Nov 02 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
Vue程序调试的方法
Jun 17 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
PHP 使用memcached简单示例分享
2015/03/05 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
PHP 断点续传实例详解
2017/11/11 PHP
php中上传文件的的解决方案
2018/09/25 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
Jquery 表格合并的问题分享
2011/09/17 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
python登陆asp网站页面的实现代码
2015/01/14 Python
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
django 创建过滤器的实例详解
2017/08/14 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
实习求职信
2013/12/01 职场文书
《学会合作》教学反思
2014/04/12 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
工程催款通知书
2015/04/17 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
使用Java去实现超市会员管理系统
2022/03/18 Java/Android