练习005 仿百度搜索框（交互、事件修饰符）

最新推荐文章于 2021-06-04 19:22:25 发布

虬川候

最新推荐文章于 2021-06-04 19:22:25 发布

阅读量213

点赞数

分类专栏： vue.js 文章标签： vue.js 交互事件修饰符百度搜索框

本文链接：https://blog.csdn.net/qq_39383675/article/details/83479335

版权

vue.js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

需求:

实现搜索框的搜索功能
a) 对用户在输入框内输入的值进行双向数据绑定
b) 点击"搜索"按钮,进行网络请求
c) 将请求回的数据在搜索框下进行展示
实现通过方向键控制搜索选项
a) 绑定上下方向键的处理函数
b) 对展示的数据进行样式绑定

代码:

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="vue-resource.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		.eee{
			background-color: #eee;
		}
	</style>
</head>
<body>
	<div id="div">
		<!--键盘监听 -->
		<input type="text" v-model="word" @keydown.down.prevent='down()' @keydown.up.prevent='up()'/>
		<!--调用几口-->
		<button @click="search">搜索</button>
		<ul>
			<!--给被选中的加上底色-->
			<li v-for="(v,k) in arr" :class="{eee: k == key}">{{ v }}</li>
		</ul>
	</div>
</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#div',
		data:{
			arr:[],
			word:'',
			key:'0'
		},
		methods:{
			search: function(){
				this.$http.jsonp('https://sug.so.360.cn/suggest',{params:{word:this.word}}).then(
					function(res){
						this.arr = res.data.s;
						console.log(res);
					}
				)
			},
			up: function(){
				this.key--;
				if(this.key<0){
					this.key = this.arr.length-1;
				}
			},
			down: function(){
				this.key++;
				if(this.key>this.arr.length-1){
					this.key = 0;
				}
			}
		}
	})
</script>