Vue模拟百度搜索 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-resource/1.3.1/vue-resource.min.js"></script> <script type="text/javascript"> window.onload = function() { new Vue({ el: "#box", data: { inputText: "", text: "", nowIndex: -1, result: [] }, methods: { show (ev) { if (ev.keyCode == 38 || ev.keyCode == 40) { if (this.nowIndex < -1){ return; } if (this.nowIndex != this.result.length && this.nowIndex != -1) { this.inputText = this.result[this.nowIndex]; } return; } if (ev.keyCode == 13) { window.open("https://www.baidu.com/s?wd=" + this.inputText, "_blank"); this.inputText = ""; } this.text = this.inputText; this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su", { params: { wd: this.inputText }, jsonp: "cb" }).then(res => { this.result = res.data.s; }) }, goto () { window.open("https://www.baidu.com/s?wd=" + this.inputText, "_blank"); this.inputText = ""; }, gotoItem(item) { window.open("https://www.baidu.com/s?wd=" + item, "_blank"); this.inputText = ""; }, down () { this.nowIndex++; if (this.nowIndex == this.result.length) { this.nowIndex = -1; this.inputText = this.text; } }, up () { this.nowIndex--; if (this.nowIndex < -1){ this.nowIndex = -1; return; } if (this.nowIndex == -1) { this.nowIndex = this.result.length; this.inputText = this.text; } } } }); } </script>
基于vue的ui框架|基于Vue.js 2.0实现百度搜索框效果
http://m.bbyears.com/flash/135969.html
推荐访问:基于vue生成二维码 基于vue的管理系统 基于vue-cli的框架 基于vue的滚动框架 基于vue的论文 基于vue的去哪儿网的可行性分析 基于vue的去哪网的开发和设计 基于vue的日历 基于vue的商城系统