溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Vuejs中如何實現(xiàn)一個搜索匹配功能”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vuejs中如何實現(xiàn)一個搜索匹配功能”吧！
代碼如下：
<!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>感謝各位的閱讀，以上就是“Vuejs中如何實現(xiàn)一個搜索匹配功能”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vuejs中如何實現(xiàn)一個搜索匹配功能這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼