vuejs实现搜索框
本文操作环境：Windows7系统、vue2.9.6版，DELL G3电脑。
vuejs怎么实现搜索框？
基于Vue.js实现简单搜索框
在github上看到的练习，看个遍代码后自己再练一遍，先放原址：https://github.com/lavyun/vue-demo-search
立即学习“前端免费学习笔记（深入）”；
主要用到的知识很简单，简单的vuejs2.0的知识就够了。源码用了.vue构建和ES6，用了webpack打包等等。我资历还浅，先用一个简单的.js的写。
先看效果
这里有两个组件，一个组件是logo部分的，一个是搜索框部分的。
html
html很简单，就是引用两个组件。
//js还要实例#appvar app = new Vue({ el: "#app"})登录后复制
logo
先来分析，首先一个
Vue.component('logo-picture',{ template :' @@##@@
@@##@@
', data: function() { return { items: [{src:'../src/assets/360_logo.png'},{src:'../src/assets/baidu_logo.png'},{src:'../src/assets/sougou_logo.png'}], now: 0, flagShow: false, hoverindex: -1 } }, methods: { //显示隐藏图片列表 toggleFlag: function() { this.flagShow = !this.flagShow; }, //改变搜索引擎 changeFlag: function(index) { this.now = index; this.flagShow = false; bus.$emit("change",index); }, //li hover flagHover: function(index) { this.hoverindex = index; } }});
登录后复制
下拉框
input因为要双向绑定，所以要v-model=”keyword”，还要绑定键盘事件@keyup，如果按enter就搜索，向下向上就选中给定的返回信息列表。
Vue.component('search-panel',{ template:' × 搜一下
{{value}}
', data: function() { return { search: '', myData: [], flag: 0, now: -1, logoData: [ { 'name': "360搜索", searchSrc: "https://www.so.com/s?ie=utf-8&shb=1&src=360sou_newhome&q=" }, { 'name': "百度搜索", searchSrc: "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=" }, { 'name': "搜狗搜索", searchSrc: "https://www.sogou.com/web?query=" } ] } }, methods: { get: function(event) { if(event.keyCode == 38 || event.keyCode == 40){ //向上向下 return ; } this.$http.jsonp('https://sug.so.360.cn/suggest?word=' + this.search + '&encodein=utf-8&encodeout=utf-8').then(function(res) { this.myData = res.data.s; }, function() { }); }, //清除内容 clearInput: function() { this.search = ''; this.get(); }, //搜索 searchInput: function() { alert(this.flag) window.open(this.logoData[this.flag].searchSrc+this.search); }, //搜索的内容 searchThis: function(index) { this.search = this.myData[index]; this.searchInput(); }, //li hover selectHover: function(index) { this.search = this.myData[index]; this.now = index; }, //向下 selectDown: function() { this.now++; if(this.now == this.myData.length) { this.now = 0; } this.search = this.myData[this.now]; }, //向上 selectUp: function() { this.now--; if(this.now == -1) { this.now = this.myData.length - 1; } this.search = this.myData[this.now]; } }, created: function() { //通信 var self = this; bus.$on('change',function(index) { self.flag = index; }) }})
登录后复制
两个兄弟组件通信的问题
换了搜索引擎的话，要换成相应的搜索引擎。这里要新建一个空的Vue对象做中间，因为两个组件不是父子关系。
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教程》
以上就是vuejs怎么实现搜索框的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3144566.html
