刚刚在学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. python 自动广播机制 (broadcasting)

    一定要注意,执行 broadcast 的前提在于,两个 ndarray 执行的是 element-wise(按位加,按位减) 的运算,而不是矩阵乘法的运算,矩阵乘法运算时需要维度之间严格匹配.(且矩阵 ...

  2. caffe(7) solver及其配置

    solver算是caffe的核心的核心,它协调着整个模型的运作.caffe程序运行必带的一个参数就是solver配置文件.运行代码一般为 # caffe train --solver=*_slover ...

  3. Vue不能检测的数组变化 对象变化

    数组: 由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时 ...

  4. [Bug]Python3.x SyntaxError: 'ascii' codec can't decode byte 0xe4 in position

    安装arch后就没再用python了 昨天管服务器的大佬在跑贝叶斯分类器的时候发现正确率有问题 我赶紧去做优化,然后就有这样的报错 Python 3.6.4 (default, Jan 5 2018, ...

  5. laravel中soapServer支持wsdl的例子

    最近在对接客户的CRM系统,获取令牌时,要用DES方式加密解密,由于之前没有搞错这种加密方式,经过请教了"百度"和"谷歌"两个老师后,结合了多篇文档内容后,终于 ...

  6. Codeforces Round #313 C. Gerald&#39;s Hexagon（放三角形）

    C. Gerald's Hexagon time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  7. Python str 与 bytes 类型（Python2/3 对 str 的处理）

    本文均在 Python 3 下测试通过,python 2.x 会略有不同. 1. str/bytes >> s = '123' >> type(s) str >> ...

  8. POJ 1966 求无向图点连通度

    思路: n^2枚举(必须要n^2枚举啊)+拆点 特此嘲讽网上诸多垃圾题解,你们许多都是错的 -yyh //By SiriusRen #include <queue> #include &l ...

  9. POJ 3257 DP

    题意: 思路: 用vector存上本出发点能到的地方&成本&有趣指数(用结构体保存) 然后DP就好了 f[i][j]表示到了i 成本为j的有趣指数最大是多少 f[vec[i][k].e ...

  10. HIVE的几种优化

    5 WAYS TO MAKE YOUR HIVE QUERIES RUN FASTER 今天看了一篇[文章] (http://zh.hortonworks.com/blog/5-ways-make-h ...