基于Vue.js 2.0实现百度搜索框效果

时间：2021-05-26

使用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:///5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="270" height="129"> <div> <div> <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> </div> <ul> <li v-for="(item, index) in result" :class='{bgcolor: index==nowIndex}' @click="gotoItem(item)"> {{item}} </li> </ul> </div> </div></body> </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章