刚刚在学vue，试着写了一个实时搜索文件。

思路:1.input 通过v-model绑定。2.通过watch检测输入结果变化。3根据结果变化从api调用不同的数据。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vue</title>
<script src="./vue.js"></script>
<script src="./axios.min.js"></script>
</head>
<body>
<div id="app">
搜索:<input v-model='search'/> </br>
 {{result}}
</div><script>
var vm = new Vue({
    el:'#app',
    data:{
        search:'',
        result:''
    },
    watch: {
       search:function (val) {
         var _self=this;
         axios.get('http://localhost/d/apisearch.php?info='+val).then(function(response){
             // console.log(response);
             _self.result=response.data
         })
    }
  }
})
</script>
</body>
</html>

用Vue+axios写一个实时搜索的更多相关文章

  1. 结合 Vue.observable 写一个简易 Vuex

    作为 Vue 全家桶的一员,Vuex 的重要性不言而喻,不管是用来管理状态,还是封装 Controler 都很好用 不过在一些体量较小的项目中,为了几个简单的状态或者处理函数而引入 Vuex,就像是高 ...

  2. 使用python和selenium写一个百度搜索的case

    今天练习的内容主要写了一个小功能,在百度上搜索某词汇,然后实现web上的back功能 代码如下: import unittest from selenium import webdriver from ...

  3. Vue.js写一个SPA登录页面的过程

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...

  4. 【vue+axios】一个项目学会前端实现登录拦截

    原文链接:github.com 一个项目学会vue全家桶+axios实现登录.拦截.登出功能,以及利用axios的http拦截器拦截请求和响应. 前言 该项目是利用了Github 提供的persona ...

  5. HTML+CSS+JS（+Vue）写一个通讯录组件

    求各位大大的Star(*/ω＼*). 没有录屏,所以上传的是图片.后面已补充录屏效果. 效果:(主要是参考小米Note3的通讯录的效果做的) 主要功能: 1. 滚动后,通讯录的模块标题会固定在顶部(图 ...

  6. 基于Vue手写一个下拉刷新

    当然不乏有很多下拉刷新的插件可以直接使用,但是自定义程度不强,大部分都只能改改文字,很难满足设计师的创意,譬如淘宝和京东首页那种效果,就需要自己花心思倒腾了,最近刚好有这种需求,做完了稍微总结一下,具 ...

  7. 在vue中写一个跟着鼠标跑的div，div里面动态显示数据

    1.div应该放在body里面,这是我放在body中的一个div里面的div <!-- 信息查看层 --> <div class="floatDiv" :styl ...

  8. 基于Vue实现关键词实时搜索高亮显示关键词

    最近在做移动real-time-search于实时搜索和关键词高亮显示的功能,通过博客的方式总结一下,同时希望能够帮助到别人~~~ 如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github ...

  9. [Vue]写一个简单的文件上传控件

    ​这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传 ​ 使用Element的u ...

随机推荐

  1. php基础：define()定义常数函数

    define(); 常量类似变量,不同之处在于: 在设定以后,常量的值无法更改 常量名不需要开头的美元符号 ($) 作用域不影响对常量的访问 常量值只能是字符串或数字 <?php define( ...

  2. Python3基础笔记--函数

    一.函数 定义: 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可     特性: 1)代码重用 2)保持一致性 3)可扩展性 参考博客: Py西游攻关之 ...

  3. docker for centos7

    docker for centos7 据官方所说,docker在新版本的ubuntu和centos7上表现更好,鉴于我们目前使用的系统是centos6.8,这次我们选择centos7作为docker的 ...

  4. github下载速度慢解决方法

    1.获取 global.ssl.fastly地址 访问 http://github.global.ssl.fastly.net.ipaddress.com/#ipinfo 获取cdn域名以及ip地址  ...

  5. linux傻瓜式安装lnmp

    一.百度 https://lnmp.org/install.html 二.点击 <安装> 三.登录 linux cd /usr/local/ wget -c http://soft.vps ...

  6. SQL替换制表、回车、换行符和首尾空格

    SQL替换制表.回车.换行符和首尾空格 最近在批量修复数据的时候,需要利用excel导入大量数据.客户提供的数据是没有规范的,大部分数据行都有制表符.回车符.换货符,以及我需要将数据进行首位去重. 目 ...

  7. django 在非空的字段里插入现象表述

    1.char 类型设置为非空 对于字段不赋值 默认储存为''(空字符串) 2.int 类型设置为非空 对于字段不赋值 单条插入 报错        多条数据同时插入 默认设置为0

  8. 一：1.1 python程序与数据储存【进制转换】

    二进制 :0 1 [逢二进一]0+0=00+1=11+1=1011+1=100 1 1+ 1------ 100 八进制: 0 1 2 3 4 5 6 7 [逢八进一] 1+7=101+2=3 十进制 ...

  9. Windows远程登录Linux

    本文以Ubuntu Kylin1404为例,说明如何通过Windows远程登录Linux. 首先,要确保Ubuntu上SSH服务执行正常.默认情况下,Ubuntu已装有SSHclient.比方输入ss ...

  10. html5的代码验证

    http://html5.validator.nu/ http://validator.w3.org/#validate_by_uri