刚刚在学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. Hope is a good thing, maybe the best of things and no good thing ever dies !

  2. JDBC连接SQL Server遇到的问题

    需要使用到微软的JDBC sql server的驱动类,去官网下载jar包 使用的URL模式:"jdbc:sqlserver:地址:端口//;databaseName=YourDatabas ...

  3. perl JSON模块使用

    简介: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 它基于JavaScript(Standard ECMA-262 3rd Edition - De ...

  4. 【Henu ACM Round#17 F】Upgrading Array

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 如果我们对某一个位置i操作两次的话. 显然结果就和操作一次一样. 因为第一次操作过后1..i这些数字就变成是互质的了. gcd为1. ...

  5. 【Educational Codeforces Round 37 C】 Swap Adjacent Elements

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 显然l..r这一段连续的1可以把l..r+1变成有序的. 那么就把所有的连续1段变成有序的就好. 看看最后是不是升序即可. [代码] ...

  6. C++ priority_queue的使用 & Java PriorityQueue

    刚刚那道BST的题目,也用到了priority_queue,那是那个没有定义比较函数. 那么下面这个,就要定义比较函数. 它的模板声明带有三个参数,priority_queue<Type, Co ...

  7. [React Native] Use the SafeAreaView Component in React Native for iPhone X Compatibility

    In this lesson, you will learn how to use the SafeAreaView component to avoid the sensor cluster (th ...

  8. android 视频开发2分之2（仿美拍，糗百）

    上一篇写了分段录制和合并视频.这一篇则是选择视频,然后截断视频. 1.从sdcard中找到视频资源: 2.分析视频,拿到你须要的帧数当你的图片.(我的是依据參数来算的多少秒1帧的图片,通常是1秒1帧来 ...

  9. 批处理实现添加java环境变量

    作者:朱金灿 来源:http://blog.csdn.net/clever101 从网上搜了一些资料,再修改测试,终于通过了win7系统的测试.代码如下: @echo off rem 本批处理文件目的 ...

  10. OSSIM（开源安全信息管理系统）在企业网络管理中的应用

    国内首个Ossim技术交流群(179084574),欢迎加入我们 参与51CTO[第242期]OSSIM,企业信息安全管理利器热门技术讨论 650) this.width=650;" bor ...