用Vue+axios写一个实时搜索
刚刚在学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写一个实时搜索的更多相关文章
- 结合 Vue.observable 写一个简易 Vuex
作为 Vue 全家桶的一员,Vuex 的重要性不言而喻,不管是用来管理状态,还是封装 Controler 都很好用 不过在一些体量较小的项目中,为了几个简单的状态或者处理函数而引入 Vuex,就像是高 ...
- 使用python和selenium写一个百度搜索的case
今天练习的内容主要写了一个小功能,在百度上搜索某词汇,然后实现web上的back功能 代码如下: import unittest from selenium import webdriver from ...
- Vue.js写一个SPA登录页面的过程
技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...
- 【vue+axios】一个项目学会前端实现登录拦截
原文链接:github.com 一个项目学会vue全家桶+axios实现登录.拦截.登出功能,以及利用axios的http拦截器拦截请求和响应. 前言 该项目是利用了Github 提供的persona ...
- HTML+CSS+JS（+Vue）写一个通讯录组件
求各位大大的Star(*/ω＼*). 没有录屏,所以上传的是图片.后面已补充录屏效果. 效果:(主要是参考小米Note3的通讯录的效果做的) 主要功能: 1. 滚动后,通讯录的模块标题会固定在顶部(图 ...
- 基于Vue手写一个下拉刷新
当然不乏有很多下拉刷新的插件可以直接使用,但是自定义程度不强,大部分都只能改改文字,很难满足设计师的创意,譬如淘宝和京东首页那种效果,就需要自己花心思倒腾了,最近刚好有这种需求,做完了稍微总结一下,具 ...
- 在vue中写一个跟着鼠标跑的div，div里面动态显示数据
1.div应该放在body里面,这是我放在body中的一个div里面的div <!-- 信息查看层 --> <div class="floatDiv" :styl ...
- 基于Vue实现关键词实时搜索高亮显示关键词
最近在做移动real-time-search于实时搜索和关键词高亮显示的功能,通过博客的方式总结一下,同时希望能够帮助到别人~~~ 如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github ...
- [Vue]写一个简单的文件上传控件
这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传 使用Element的u ...
随机推荐
- WIFI 测试和调试
WIFI测试和调试 本文将介绍如何使用 ASOP 中提供的工具测试和调试 WLAN 实现. 测试 为了测试 WLAN 框架,AOSP 提供了一系列单元测试.集成测试 (ACTS) 和 CTS 测试. ...
- GPU Command Buffer
For Developers > Design Documents > GPU Command Buffer This are mostly just notes on the ...
- 如何在一个 U 盘上安装多个 Linux 发行版
作者: Ambarish Kumar 译者: LCTT geekpi 本教程介绍如何在一个 U 盘上安装多个 Linux 发行版.这样,你可以在单个 U 盘上享受多个现场版live Linux 发行版 ...
- NOIP2017 Day-1 模板荟萃
#include<bits/stdc++.h> #define MAXN 100005 using namespace std; int read(){ ;char c=getchar() ...
- 修复linux的grub2引导(单独/boot，lvm-root)
root@ubuntu:/home/ubuntu# pwd /home/ubuntu root@ubuntu:/home/ubuntu# lsblk NAME MAJ ...
- dd---复制文件并对原文件的内容进行转换和格式化处理
dd命令用于复制文件并对原文件的内容进行转换和格式化处理.dd命令功能很强大的,对于一些比较底层的问题,使用dd命令往往可以得到出人意料的效果.用的比较多的还是用dd来备份裸设备.但是不推荐,如果需要 ...
- 千千万万的IT开发project师路在何方
已经找不到该文章的最初出处了,有找到的人请告诉我.谢谢~~ 千千万万的IT开发project师路在何方 2007-06-25 21:41 恭喜,你选择开发project师作为自已的职业! 悲哀.你选择 ...
- android动画-拖动
先上图看效果 实质上说是动画有点不妥,确切的说应该是手势的处理,废话不多说看代码 SimpleDragSample.java public class SimpleDragSample extends ...
- Python爬虫爬取一篇韩寒新浪博客
网上看到大神对Python爬虫爬到非常多实用的信息,认为非常厉害.突然对想学Python爬虫,尽管自己没学过Python.但在网上找了一些资料看了一下,看到爬取韩寒新浪博客的视频.共三集,第一节讲爬取 ...
- thinkphp5项目--企业单车网站（六）
thinkphp5项目--企业单车网站(六) 项目地址 fry404006308/BicycleEnterpriseWebsite: Bicycle Enterprise Websitehttps:/ ...