刚刚在学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. CDH5.14操作指南

    1.Cdh 5.14介绍 2.版本发布概要 3.安装要求 4.Cloudera Manager介绍 5.Cloudera 安装 6.Cloudera 管理 7.Cloudera Navigator C ...

  2. CSU 1506 Double Shortest Paths

    1506: Double Shortest Paths Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 49  Solved: 5 Description ...

  3. HDU 5303 Delicious Apples（贪心 + 背包 2015多校啊）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5303 Problem Description There are n apple trees plan ...

  4. SQL Server数据全同步及价值分析[终结版]

    SQL Server数据全同步[终结版] 版权全部.转载请注明出处.谢谢! 经过两天的同步编写和測试.出了第一个Release版本号: 1. 本函数仅支持单向同步.即从一个主数据库想多个从数据库同步 ...

  5. Word 操作组件介绍 - Spire.Doc

    http://www.cnblogs.com/liqingwen/p/5898368.html

  6. .Net经典笔试题

    1. 简述 private. protected. public. internal 修饰符的访问权限. 答:private:私有成员,在类的内部才可以访问: protected:保护成员,该类内部和 ...

  7. 分享一下vue ui的分页的用法

    var newToAddLeave = function(){ var goIndex = { template:` <i-table :columns="overTimeList.c ...

  8. Installation from source on Windows 7 with Visual C++2012

    在这部分说明里,你将会学习到在配备有Visual C++的Windows平台下从源码安装ViSP.下面的这些安装步骤已经在32位Windows系统,CMake3.1和Visual Studio 201 ...

  9. linux 10201 ocfs RAC 安装+升级到10205

    准备环境的时 ,要4个对外IP,2个对内IP 不超过2T,,一般都用OCFS 高端存储适合用ASM linux10G安装的时候,安装的机器时间要小于等于(如果是等于要严格等于)第二个机器的时间(只有l ...

  10. DataTable中Compute计算函数

    DataTable dt = new DataTable(); //嵌套的三元运算 牛叉到五体投地 object obj = dt.Compute("iif(1000=5,1000,iif( ...