Vue 仿百度搜索功能实现代码仿百度搜索功能实现代码
本文通过实例代码给大家介绍了vue仿百度搜索功能，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
无上下选择无上下选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="../js/Vue.js"></script>
<script src="../js/vue-resource.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
myData:[],
t1:''
},
methods:{
get:function(){
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:this.t1
},{
jsonp:'cb'
}).then(function(res){
this.myData=res.data.s
},function(){
});
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="t1" @keyup="get()">
<ul>
<li v-for="value in myData">{{value}}</li>
</ul>
<p v-show="myData.length==0">暂无数据...</p>
</div>
</body>
</html>
加上上下选择加上上下选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.gray{
background: #ccc;
}
</style>
<script src="../js/vue1.0.js"></script>
<script src="../js/vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{
myData:[],
t1:'',
now:-1
},
methods:{
get:function(ev){
weixin_38748769
- 粉丝: 10
- 资源: 925
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- GO婚礼设计创业计划：技术驱动的婚庆服务
- 微信行业发展现状及未来发展趋势分析
- 信息技术在教育中的融合与应用策略
- 微信小程序设计规范：友好、清晰的用户体验指南
- 联鼎医疗：三级甲等医院全面容灾备份方案设计
- 构建数据指标体系：电商、社区、金融APP案例分析
- 信息技术：六年级学生制作多媒体配乐古诗教程
- 六年级学生PowerPoint音乐动画实战：制作配乐古诗演示
- 信息技术教学设计：特点与策略
- Word中制作课程表：信息技术教学设计
- Word教学：制作课程表，掌握表格基础知识
- 信息技术教研活动年度总结与成果
- 香格里拉旅游网设计解读：机遇与挑战并存
- 助理电子商务师模拟试题：设计与技术详解
- 计算机网络技术专业教学资源库建设与深圳IT产业结合
- 微信小程序开发：网络与媒体API详解
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
