In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-04-06 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/03 Report--
Editor to share with you how to achieve the search box vuejs, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to understand it!
Vuejs to achieve the search box method: 1, create logo and search box part of the component; 2, create an empty Vue object; 3, use "bus.$emit (" change ", index);" trigger the event and pass parameters.
This article operating environment: Windows7 system, vue2.9.6 version, DELL G3 computer.
How does vuejs implement the search box?
Realization of simple search box based on Vue.js
For the exercises you see on github, read the code and then practice it yourself. Put it at the original location: https://github.com/lavyun/vue-demo-search
The main knowledge used is very simple, simple knowledge of vuejs2.0 is enough. The source code uses .vue build and ES6, uses webpack packaging, and so on. My seniority is still inexperienced, first use a simple .js to write.
Let's see the effect first.
There are two components, one for the logo part and one for the search box.
Html
Html is as simple as referencing two components.
/ / js also needs instance # appvar app = new Vue ({el: "# app"})
Logo
Let's analyze it first, the first one
Display search engine pictures, here to be responsive, the following selection of different search engine icons should be changed. So
. The drop-down list is displayed when the inverted triangle is clicked.
Then there is the drop-down box. If you want to have a transitional effect, you have to wrap that in
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.