vue 简单仿写百度搜索

最新推荐文章于 2022-04-25 13:35:40 发布

swrd2014

最新推荐文章于 2022-04-25 13:35:40 发布

阅读量814

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML/CSS JS vue

本文链接：https://blog.youkuaiyun.com/u014041540/article/details/72967924

JS 同时被 3 个专栏收录

35 篇文章

订阅专栏

HTML/CSS

34 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

<!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>