Vuejs How to implement a search matching function

This article shared everyone about how Vuejs implements the search matching function. Xiaobian feels quite practical, so share it with you to do a reference. Let’s take a look at Xiaobian.

Recently I have been watching Vue, I checked a lot of information, I have read a lot of documents and blogs, about half-solving, and then use the understanding knowledge to write a simple search matching function.

The data is fake Vuejs怎么实现搜索匹配功能

Code section

(Note that I reference is local Vue.Min.js file, please pay attention to the file path.)

 VUE test 2    * {padding: 0; margin: 0; font-size: 14px; font-family: "Microsoft Ya black" } #box {width: 500px; Height: auto; border: 1px solid #ccc; margin: 50px auto; padding: 10px;} .Search {width: 480px; height: 100px; text-align: center;} .Searchbox {Width: 230px; Height: 40px; Outline: None; Text-Indent: 10px; Margin-Right: 20px;} .btn {width: 100px; Height: 50px; Cursor: Pointer; font-size: 18px;} .goodsheet {width: 500px; height: auto; border; : 1px solid #eee;} .goodsheet tr td, .goodsheet tr ten {width: 33%; border: 1px solid #eee; padding: 5px 10px; text-align: left;} .goodsheet tr ten span}. FF9900; Padding: 0 6px; Color: #fff; Cursor: Pointer;}     Search      Commodity name  

unit price

{ipiem.name}} {{ITEM. Price}} {{ipales}} 万 Var myvuetest = new Vue ({EL: '# Box', data: {goodSlist : [// Data {Name: "Samsung Galaxy Note8", Price: 5200, Sales: 2.6}, {Name: "iPhone5s", Price: 2500, Sales: 2.2}, {Name: "iPhone6", Price: 2800 Sales: 1.6}, {name: "iPhone6S", Price: 3200, Sales: 2.9}, {Name: "iPhone7", Price: 3800, Sales: 12.6}, {Name: "iPhone7plus", Price: 4200, Sales : 2.1}, {Name: "iPhone8", Price: 5500, Sales: 10.6}, {Name: "Huawei", Price: 4600, Sales: 7.6},{Name: "Millet", Price: 1200, Sales: 32.6}, {Name: "Oppor11", Price: 3000, Sales: 1.2}, {Name: "Vivox20", Price: 3250, Sales: 2.9}], SearchVal : '', // Default Enter is empty letter: '', // The default is not sorted Original: false // Default from small to large routing}, methods: {Orderfn (letter, original) {this.letter = letter; // Sort field price or sales this.original = original; // sort mode UP or DOWN}}, // By calculating the property filtering data computed: {list: function () {var _this = this; // Logic -> According to Input Value Value Filters Data Var Arrbyzm = []; // Declare an empty array to store data for (VAR i = 0; i Assembly descending order: Default from small to large TRUE: Default From large to small // Judgment, if you want to letter is not empty, explain the sorting IF (this.letter! = '') {Arrbyzm.sort (Function (A, B) {{RETURN B [_THIS.LETTER] - A [_this.letter];} else {return a [_this.letter] - b [_this.letter] }});} / / Must remember to return the data return arrbyzm;}}});
In fact, the core algorithm is still The native JS wrote, Vue provides a very powerful data binding method, but if you only know the frame of Vue, there is no big use of your core thinking, so the author is in the official document, I hope we have a certain JS. Basic. I still think that the front end frame is more, and the most powerful is always JS. Thank you for reading! Regarding how Vuejs implements search matching, you can share it here, I hope that the above can help everyone, let everyone learn more knowledge. If you feel that the article is good, you can share it out to let more people see it!
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment