2024年11月04日 建站教程
如何利用Vuejs代码实现搜索匹配功能，下面web建站小编给大家详细介绍一下具体实现代码！
vuejs代码如下：
let myVueTest = new Vue({
el:'#search',
data:{
goodsList:[
{name:iphone5s,price:5500},
{name:iphone6,price:5800},
{name:iphone6s,price:5200},
{name:iphone7,price:6800},
{name:iphone8,price:9500},
{name:OPPOR11,price:5000},
{name:vivoX20,price:6250}
],
searchVal:'',
letter:'',
original:false
},
methods:{
orderFn(letter,original){
this.letter = letter;
this.original = original;
}
},
//通过计算属性过滤数据
computed:{
list: function(){
let _this = this;
let arrList = [];
for (let i=0;i<this.goodsList.length;i++){
//for循环根据name值
if(this.goodsList[i].name.search(this.searchVal) != -1){
arrList.push(this.goodsList[i]);
}
}
if(this.letter != ''){
arrList.sort(function( a , b){
if(_this.original){
return b[_this.letter] - a[_this.letter];
}else{
return a[_this.letter] - b[_this.letter];
}
});
}
return arrList;
}
}
});
本文链接：http://so.lmcjl.com/news/16967/