Vue.js2.0实现百度搜索框

来源：动视网责编：小采时间：2020-11-27 19:54:11

Vue.js2.0实现百度搜索框

Vue.js2.0实现百度搜索框:这次给大家带来Vue.js 2.0实现百度搜索框，Vue.js 2.0实现百度搜索框的注意事项有哪些，下面就是实战案例，一起来看一下。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l

推荐度：

点击下载本文 文档为doc格式

导读Vue.js2.0实现百度搜索框:这次给大家带来Vue.js 2.0实现百度搜索框，Vue.js 2.0实现百度搜索框的注意事项有哪些，下面就是实战案例，一起来看一下。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l

这次给大家带来Vue.js 2.0实现百度搜索框，Vue.js 2.0实现百度搜索框的注意事项有哪些，下面就是实战案例，一起来看一下。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=2.0, maximum-scale=1.0, minimum-scale=1.0">
 <title>Vue模拟百度搜索</title>
 <style type="text/css">
 body, html{
 padding: 0;
 margin: 0;
 }
 #box{
 margin-top: 80px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 }
 .input{
 width: 500px;
 height: 30px;
 text-indent: 4px;
 }
 .baidu input{
 height: 30px;
 cursor: pointer;
 color: #fff;
 letter-spacing: 1px;
 background: #3385ff;
 border: 1px solid #2d78f4;
 }
 ul{
 padding: 0;
 margin-top: 6px;
 }
 li{
 list-style: none;
 margin: 4px;
 }
 li:hover{
 background: #ccc;
 }
 .bgcolor {
 background: #ccc;
 }
 </style>
 <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>
</head>
 
<body>
 <p id="box">
 <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="270" height="129">
 <p>
 <p>
 <input
 type="text"
 class="input"
 placeholder="请输入搜索内容 "
 v-model='inputText'
 @keyup='show($event)'
 @keydown.down='down()'
 @keydown.up.prevent='up()'
 >
 <span class="baidu" @click="goto()">
 <input type="submit" value="百度一下" >
 </span>
 </p>
 
 <ul>
 <li v-for="(item, index) in result" :class='{bgcolor: index==nowIndex}' @click="gotoItem(item)">
 {{item}}
 </li>
 </ul>
 </p>
 
 </p>
</body> 
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

Vue.js2.0实现百度搜索框

推荐度：

点击下载本文 文档为doc格式

标签：百度搜索框 vue.js vue实

热门焦点

Vue.js2.0实现百度搜索框

Vue.js2.0实现百度搜索框

Vue.js2.0实现百度搜索框

最新推荐

猜你喜欢

热门推荐