基于Vue.js实现简单搜索框

<div id="app">
 <logo-picture></logo-picture>
 <search-panel></search-panel>
</div>

//js还要实例#app
var app = new Vue({
 el: "#app"
})

Vue.component('logo-picture',{
 template :'  <div class="main-logo"> <img :src="/UploadFiles/2021-04-02/items[now].src">

下拉框
input因为要双向绑定，所以要v-model="keyword"，还要绑定键盘事件@keyup，如果按enter就搜索，向下向上就选中给定的返回信息列表。 

下面的详情框与<logo-picture>下拉列表差不多。 

搜索的话主要是运用$http.jsonp，还有ES6的语法？回掉好像是Promise的.then()。


Vue.component('search-panel',{
 template:' <div class="search-input"> <input v-model="search" @keyup="get($event)" @keydown.enter="searchInput()" @keydown.down="selectDown()" @keydown.up.prevent="selectUp()"/> <span @click="clearInput()" class="search-reset">&times;</span> <button @click="searchInput()" class="search-btn">搜一下</button> <div class="search-select"> <transition-group tag="ul" mode="out-in"> <li v-for="(value,index) in myData" :class="{selectback:index==now}" :key="index" @click="searchThis" @mouseover="selectHover(index)" class="search-select-option search-select-list">  {{value}} </li> </transition-group> </div> </div>',
 data: function() {
 return {
 search: '',
 myData: [],
 flag: 0,
 now: -1,
 logoData: [
 {
  'name': "360搜索",
  searchSrc: "https://www.so.com/s"
 },
 {
  'name': "百度搜索",
  searchSrc: "https://www.baidu.com/s"
 },
 {
  'name': "搜狗搜索",
  searchSrc: "https://www.sogou.com/web"
 }
 ]
 }
 },
 methods: {
 get: function(event) {
 if(event.keyCode == 38 || event.keyCode == 40){ //向上向下
 return ;
 }
 this.$http.jsonp('https://sug.so.360.cn/suggest"htmlcode">

var bus = new Vue();

//logo-picture里触发事件，并传递参数
bus.$emit("change",index);

//search-panel里监听事件是否发生
var self = this;
bus.$on('change',function(index) {
 self.flag = index;
})




这里要注意this问题，$on里this指向bus，所以要保存this才能引用search-panel.
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
更多搜索功能实现的精彩文章，请点击专题：javascript搜索功能汇总 进行学习
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。