刚刚在学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. UVa 12661 Funny Car Racing【 dijkstra 】

    题意:给出n个点,m条路,每条路用5个整数表示u,v,a,b,t u表示这条路的起点,v表示终点,a表示打开时间,b表示关闭时间,t表示通过这条道路需要的时间 看的紫书,因为边权不再仅仅是路上的时间, ...

  2. del_archivelog

    #!/usr/bin/env bash                          #  # INTRO : The script for delete physical standby app ...

  3. Debian9.5下ssh密钥登录配置步骤（免密码登录）和ssh-keygen 命令常用参数

    密钥登录步骤(免密码登录)ssh登录提供两种认证方式:口令(密码)认证方式和密钥认证方式.其中口令(密码)认证方式是我们最常用的一种,出于安全方面的考虑,介绍密钥认证方式登录到linux/unix的方 ...

  4. php文件加载、错误处理、方法函数和数组

    数组运算符注意:php中,数组的元素的顺序,不是由下标(键名)决定的,而是完全由加入的顺序来决定.联合(+):将右边的数组项合并到左边数组的后面,得到一个新数组.如有重复键,则结果以左边的为准$v1 ...

  5. git diff的文字说明

    -U<n>--unified=<n> Generate diffs with <n> lines of context instead of the usual t ...

  6. 通过.ENV文件来配置ThinkPHP的数据库连接信息

    在ThinkPHP系统根目录创建.env文件,注意WINDOWS无法直接右键创建,使用编辑器保存时设置文件名为.env就可以创建文件.内容如下: .evn文件内容如下: [database] host ...

  7. Systemd曝3漏洞，大部分Linux将受到攻击

    Linux 系统与服务管理工具 Systemd 被曝存在 3 大漏洞,影响几乎所有 Linux 发行版. Systemd 是 Linux 系统的基本构建块,它提供了对系统和服务的管理功能,以 PID ...

  8. Android SDK Manager代理设置

    1.SDK Manager中打开 Tools—>Manage Add-on Sites…—>User Defined Sites 2.New …输入: http://android-mir ...

  9. 怎样只接受固定长度数组为参数 & 数组形参

    注意,对于多维数组的情况.

  10. Cisco路由器交换机配置命令详解

    1. 交换机支持的命令: 交换机基本状态:switch: :ROM状态, 路由器是rommon>hostname> :用户模式hostname# :特权模式hostname(config) ...