vue 简单仿写百度搜索

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue</title>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/vue-resource.js" ></script>
		<style>
			.grey{
				background: #CCC;
				height: 25px;				
			}
			ul,li{
				margin: 0;
				padding: 0;
				list-style-type:none;
				margin-left: 65px;
				width: 306px;

			}
			.dialog{
				margin-left: 10px;
				margin-top: 30px;
				width: 300px;
				height: 25px;
			}
			.note{
				margin-left: 130px;
				
			}
		</style>
	</head>
	<body>
		
		<script>
			window.onload=function(){
					new Vue({
					el :"#app",
					data:{
						myData:[],
						t1: "",
						now:-1
					},
					methods:{
						get:function(e){
							if(e.keyCode==38||e.keyCode==40) return;
							if(e.keyCode==13){
								window.open('https://www.baidu.com/s?wd='+this.t1);
							}
							this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
								jsonp:'cb',params:{wd:this.t1}
							}).then(function(_data){
								this.myData=_data.data.s;
							},function(){
								
							});
						
							
							
						},
						changeDown:function(){
							this.now++;
							if(this.now==this.myData.length)this.now=-1;
							this.t1=this.myData[this.now];
						},
						changeUp:function(){
							this.now--;
							if(this.now==-2)
							this.now=this.myData.length-1;
							this.t1=this.myData[this.now];
						}
						
					}
				
			})
				
			}
		
		</script>
		
		<div id="app">
			<img src="img/baidu_jgylogo3.gif"/>
			<input type="text" name="" id="" value="" :class="{dialog:true}" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()"/>
			<ul>
				<li v-for="(value,index) in myData" :class="{grey:index==now}">
					{{value}}
				</li>
			</ul>
			<p v-show="myData.length==0" :class="{note:true}">暂无数据...</p>
		</div>
	</body>
</html>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值