基于Vuejs的搜索匹配功能实现方法
更新时间：2018年03月03日 13:48:54 作者：here962464
下面小编就为大家分享一篇基于Vuejs的搜索匹配功能实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
最近一直在看vue，查了很多资料，看了很多文档和博客，大概半知半解了，然后利用所理解的知识写了一个简单的搜索匹配功能。
大概长这个样子：
数据都是假的
代码部分
（注意我引用的是本地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:[
//假数据
{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:'', //默认输入为空
letter:'', //默认不排序
original:false //默认从小到大排列
},
methods:{
orderFn(letter,original){
this.letter = letter; //排序字段 price or sales
this.original = original; //排序方式 up or down
}
},
//通过计算属性过滤数据
computed:{
list: function(){
var _this = this;
//逻辑-->根据input的value值筛选goodsList中的数据
var arrByZM = [];//声明一个空数组来存放数据
for (var i=0;i<this.goodsList.length;i++){
//for循环数据中的每一项（根据name值）
if(this.goodsList[i].name.search(this.searchVal) != -1){
//判断输入框中的值是否可以匹配到数据，如果匹配成功
arrByZM.push(this.goodsList[i]);
//向空数组中添加数据
}
}
//逻辑-->升序降序排列 false: 默认从小到大 true：默认从大到小
//判断，如果要letter不为空，说明要进行排序
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];
}
});
}
//一定要记得返回筛选后的数据
return arrByZM;
}
}
});
</script>
</body>
</html>
其实核心算法还是用原生JS写的，vue提供了很强大的数据绑定方法，但是如果只知道vue这个框架，没有自己的核心思想的话，还是没多大用处的，所以作者在官方文档里面说希望我们是有一定JS基础的。我还是觉得前端框架再多，最厉害的永远是原生JS。
以上这篇基于Vuejs的搜索匹配功能实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 在methods中调用mounted的实现操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue计算属性想要传入参数如何解决问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了Vue3实现可视化拖拽标签小程序,实现功能可视化标签拖拽，双击标签可修改标签内容，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-09-09
这篇文章主要介绍了Vue.js在数组中插入重复数据的实现代码,需要的朋友可以参考下2017-11-11
这篇文章主要给大家介绍了关于Vue3中引入scss文件的方法步骤,在实际项目中,各种样式往往有很多重复的情况,为了能够使样式的后续开发和维护更加惬意,将这些共同的代码进行命名然后调用这些变量是一个很好的选择,需要的朋友可以参考下2023-08-08
vue2.6.10+vite2开启template模板动态编译的过程
这篇文章主要介绍了vue2.6.10+vite2开启template模板动态编译,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
这篇文章主要介绍了Vuejs 中使用 markdown的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了关于全局安装vue-cli遇到的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要给大家介绍了关于在vue上使用cesium开发三维地图的详细过程,Cesium是一个强大的JavaScript库,支持三维地理信息展示,并提供了丰富的地理空间数据可视化功能,需要的朋友可以参考下2023-12-12
最近遇到一个需求,在 Vue3 的一个 H5 页面当中点击拖拽图标上下拖动 tab 子项,然后点击保存可以保存最新的 tab 项顺序,同事说可以用 vue-draggable-plus 这个库来实现拖拽,所以本文给大家介绍了如何使用vue-draggable-plus实现拖拽排序,需要的朋友可以参考下2024-01-01
最新评论