基于Vuejs的搜索匹配功能實現(xiàn)方法
最近一直在看vue,查了很多資料,看了很多文檔和博客,大概半知半解了,然后利用所理解的知識寫了一個簡單的搜索匹配功能。
大概長這個樣子:
數(shù)據(jù)都是假的
代碼部分
(注意我引用的是本地vue.min.js文件,請注意文件路徑。)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue測試2</title> <script type="text/javascript" src="vue.min.js"></script> <style type="text/css"> *{ padding: 0; margin: 0; font-size: 14px; font-family: "微軟雅黑"; } #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 th{ width: 33%; border: 1px solid #eee; padding: 5px 10px; text-align: left; } .goodsheet tr th span{ background: #ff9900; padding: 0 6px; color: #fff; cursor: pointer; } </style> </head> <body> <div id="box"> <div class="search"> <input type="text" class="searchBox" v-model="searchVal"> <button class="btn">搜 索</button> </div> <table class="goodsheet"> <tr> <th>商品名</th> <th>單價 <span @click="orderFn('price', false)">↑</span> <span @click="orderFn('price', true)">↓</span> </th> <th>銷量 <span @click="orderFn('sales', false)">↑</span> <span @click="orderFn('sales', true)">↓</span> </th> </tr> <tr v-for='(item, key) in list'> <td>{{item.name}}</td> <td>{{item.price}}</td> <td>{{item.sales}}萬</td> </tr> </table> </div> <script type="text/javascript"> var myVueTest = new Vue({ el:'#box', data:{ goodsList:[ //假數(shù)據(jù) {name:"三星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:"華為",price:4600,sales:7.6}, {name:"小米",price:1200,sales:32.6}, {name:"OPPOR11",price:3000,sales:1.2}, {name:"vivoX20",price:3250,sales:2.9} ], searchVal:'', //默認(rèn)輸入為空 letter:'', //默認(rèn)不排序 original:false //默認(rèn)從小到大排列 }, methods:{ orderFn(letter,original){ this.letter = letter; //排序字段 price or sales this.original = original; //排序方式 up or down } }, //通過計算屬性過濾數(shù)據(jù) computed:{ list: function(){ var _this = this; //邏輯-->根據(jù)input的value值篩選goodsList中的數(shù)據(jù) var arrByZM = [];//聲明一個空數(shù)組來存放數(shù)據(jù) for (var i=0;i<this.goodsList.length;i++){ //for循環(huán)數(shù)據(jù)中的每一項(根據(jù)name值) if(this.goodsList[i].name.search(this.searchVal) != -1){ //判斷輸入框中的值是否可以匹配到數(shù)據(jù),如果匹配成功 arrByZM.push(this.goodsList[i]); //向空數(shù)組中添加數(shù)據(jù) } } //邏輯-->升序降序排列 false: 默認(rèn)從小到大 true:默認(rèn)從大到小 //判斷,如果要letter不為空,說明要進(jìn)行排序 if(this.letter != ''){ arrByZM.sort(function( a , b){ if(_this.original){ return b[_this.letter] - a[_this.letter]; }else{ return a[_this.letter] - b[_this.letter]; } }); } //一定要記得返回篩選后的數(shù)據(jù) return arrByZM; } } }); </script> </body> </html>
其實核心算法還是用原生JS寫的,vue提供了很強大的數(shù)據(jù)綁定方法,但是如果只知道vue這個框架,沒有自己的核心思想的話,還是沒多大用處的,所以作者在官方文檔里面說希望我們是有一定JS基礎(chǔ)的。我還是覺得前端框架再多,最厲害的永遠(yuǎn)是原生JS。
以上這篇基于Vuejs的搜索匹配功能實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3實現(xiàn)canvas畫布組件自定義畫板實例代碼
Vue?Canvas是一個基于Vue.js的輕量級畫板組件,旨在提供一個簡易的畫布功能,用戶可以在網(wǎng)頁上進(jìn)行自由繪圖,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09詳解如何提高 webpack 構(gòu)建 Vue 項目的速度
這篇文章主要介紹了詳解如何提高 webpack 構(gòu)建 Vue 項目的速度,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07vue項目使用electron進(jìn)行打包操作的全過程
我們都知道Electron項目分為了主進(jìn)程和渲染進(jìn)程,主進(jìn)程其實就是我們的Electron,渲染進(jìn)程就相當(dāng)于我們的Vue項目,下面這篇文章主要給大家介紹了關(guān)于vue項目使用electron進(jìn)行打包操作的全過程,需要的朋友可以參考下2023-03-03解決vant title-active-color與title-inactive-color不生效問題
這篇文章主要介紹了解決vant title-active-color與title-inactive-color不生效問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11解決vue項目運行出現(xiàn)warnings?potentially?fixable?with?the?`--fix
這篇文章主要介紹了解決vue項目運行出現(xiàn)warnings?potentially?fixable?with?the?`--fix`?option的報錯問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2021-11-11vue-cli項目根據(jù)線上環(huán)境分別打出測試包和生產(chǎn)包
這篇文章主要介紹了vue-cli項目根據(jù)線上環(huán)境打出測試包和生產(chǎn)包的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05