用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 ...
随机推荐
- webpack入门与笔记
为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包.为了简化开发的复杂度,前端社区涌现出了很多好的实践方法 模块化,让我们可以 ...
- 俩层判断,判断button是否可以点击
描述如下: 当被保人数超过三个人并且input是必填项的时候button是disable为false的 代码如下: //起保日期 $('.pickerfour').on('tap', function ...
- js数组去重问题
1. 双层循环:外层循环,内层比较值: (1)利用splice直接在原数组进行操作 Array.prototype.delRepeat = function (){ var arr = this; v ...
- db2部署
下载地址: wget ftp://public.dhe.ibm.com/software/hk/cobra/db2exc_970_LNX_x86_64.tar.gz 上传压缩包到/opt,再解压d ...
- Unity C# 设计模式(一)单例模式
动机(Motivation): 在软件系统中,经常有这样一些特殊的类,必须保证它们在系统中只存在一个实例,才能确保它们的逻辑正确性.以及良好的效率 意图: 保证一个类仅有一个实例,并提供一 ...
- 【cdoj 1544】当咸鱼也要按照基本法
[题目链接]:http://acm.uestc.edu.cn/#/problem/show/1544 [题意] [题解] 容斥原理题; 1..(2^m)-1枚举 设k为其二进制形式中1的个数; k为奇 ...
- ArcGIS api for javascript——地图配置-定制导航箭头
描述 本例展示了如何为平移地图包括自定义的按钮.地图被放置在一个宽3列和高3行的HTML表格的固定宽度中心单元.表格里剩余的单元放置标签为8个主要方向的缩写的按钮.每个按钮调用地图上不同的平移函数.例 ...
- Ubuntu14.04下安装和"激活"Office2010ProPlus与Visio2010(15.11.20Updated)
本人用Ubuntu的时候全然没有打游戏的欲望,故而能够更高效的工作. 尽管说LibreOffice.WPS等等有Ubuntu版本号,可是用着还是没有微软的Office顺手,故而折腾了一下怎样安装Off ...
- 大话设计模式C++实现-第15章-抽象工厂模式
一.UML图 二.概念 抽象方法模式(Abstract Factory):提供一个创建一系列相关或互相依赖对象的接口,而无需指定他们详细的类. 三.包括的角色 (1)抽象工厂 (2)详细工厂:包含详细 ...
- 泛泰A820L (高通MSM8660 cpu) 3.4内核的CM10.1(Android 4.2.2) 測试版第二版
欢迎关注泛泰非盈利专业第三方开发团队 VegaDevTeam (本team 由 syhost suky zhaochengw(z大) xuefy(大星星) tenfar(R大师) loogeo cr ...