用vue实现百度搜索功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script>
window.onload=function(){
var url='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su';
new Vue({
el:'body',
data:{
Data:[],
tl:''
},
methods:{
get:function(){
this.$http.jsonp(url,{
wd:this.tl
},{
jsonp:"cb"
}).then(function(res){
console.log(res.data.s);
this.Data=res.data.s;
},function(){ });
}
}
})
}
</script>
</head> <body>
<div id="box">
<input type="text" v-model="tl" @keyup="get()">
<ul>
<li v-for="value in Data">
{{value}}
</li>
</ul>
<p v-show="Data.lengh==0">暂无内容……</p>
</div>
</body>
</html>
用vue实现百度搜索功能的更多相关文章
- vue 使用watch监听实现类似百度搜索功能
watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...
- js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- CI 结合 vue.js 的搜索功能模块
CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...
- JS 实现百度搜索功能
今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- 原生JS实现百度搜索功能
今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset= ...
- vue-resource使用 (vue仿百度搜索)
1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> ...
- vue自动完成搜索功能的数据请求处理
在现在的互联网世界里,自动完成的搜索功能是一个很常见的功能.比如百度.搜狗.360搜索 ... 功能描述一下大概是这个样子的:有一个搜索框,用户在里面输入要查询的条件,系统会“智能”判断用户输完了,然 ...
- vue实现百度搜索下拉提示功能
这段代码用到vuejs和vue-resouece.实现对接智能提示接口,并通过上下键选择提示项,按enter进行搜索 <!DOCTYPE html> <html lang=" ...
- 使用vue实现自定义搜索功能
实现效果如:http://www.ligerui.com/demos/filter/filter.htm 代码: <%@ Page Language="C#" AutoEve ...
随机推荐
- 快用Visual Studio（二）- 界面，功能区与命令面板
Layout Editing Explorer Saving Searching Command Palette File Navigation File and Folder Based Files ...
- gerrit代码审核工具之“error unpack failed error Missing unknown”错误解决思路
使用gerrit代码审核工具时遇到error: unpack failed: error Missing unknown d6d7c89bd1d77f44c5c8e99437aaffbfc0684e7 ...
- vue.js的一些小语法v-for,v-text,v-html,v-on:click
1.Vue的目录结构: ======================================================================================== ...
- 记一次mogodb占用cpu高问题
公司服务器上安装了contly,是一个开源的node.js项目,用于统计手机app使用情况,后端数据储存使用的mongodb,使用的时候经常发现mongodb占用cpu非常高,打到了210%的爆表值 ...
- bugfree登录后报错PHP Fatal error: Call-time pass-by-reference has been removed in
详细报错信息[Tue Apr 25 06:49:07.556316 2017] [:error] [pid 21799] [client *.*.*.*:55813] PHP Fatal error: ...
- 关于java.lang.Exception:No tests found matching的一系列解决方法
问题描述: java.lang.Exception: No tests found matching [{ExactMatcher:fDisplayName=yahaa], {ExactMatcher ...
- git代码版本回退
git log 用于查看我们修改提交的快照记录(commit记录),然后会有个commit修改记录的id编号,该命令显示从最近到最远的提交日志,我们可以看到3次提交记录,如下: git checkou ...
- weblogic 12c重置console密码
su - oracle cd /u02/weblogic/user_projects/domains/base_domain source bin/setDomainEnv.sh cd /u02/ ...
- Linux IPv6 地址配置
添加IPV6地址ip -6 addr add <ipv6address>/<prefixlength> dev <interface>ip -6 addr add ...
- 014——数组（十四）array_reduce array_slice array_splice array_sum
<?php /** */ //array_reduce()递归的用回调函数递归的对数组元素进行处理,返回处理后的值 /*$arr=array(1,2,3,4,5); function func( ...