最近一直在看vue，查了很多资料，看了很多文档和博客，大概半知半解了，然后利用所理解的知识写了一个简单的搜索匹配功能。 
大概长这个样子：
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue测试2</title>
<script type="text/javascript" src="js/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>

基于Vuejs的搜索匹配功能的更多相关文章

  1. iOS 模糊、精确搜索匹配功能方法总结 By HL

    字符串搜索主要用于UITableView的搜索功能的筛选,过滤,查询 下面是一些流行的搜索查询方法 一.遍历搜索 for循环 根据要求:精确搜索(判读字符串相等)   模糊搜索(字符串包含) 相关知识 ...

  2. HTML5 JS实现搜索匹配功能

    http://www.codefans.net/jscss/code/4830.shtml <!DOCTYPE html><head><title>jQuery实现 ...

  3. 基于HALCON的模板匹配方法总结

    注:很抱歉,忘记从转载链接了,作者莫怪.... 基于HALCON的模板匹配方法总结 很早就想总结一下前段时间学习HALCON的心得,但由于其他的事情总是抽不出时间.去年有过一段时间的集中学习,做了许多 ...

  4. 转载：基于HALCON的模板匹配方法总结

    转载链接:     http://blog.csdn.net/b108074013/article/details/37657801 很早就想总结一下前段时间学习HALCON的心得,但由于其他的事情总 ...

  5. 基于HALCON的模板匹配方法总结 （转）

    很早就想总结一下前段时间学习HALCON的心得,但由于其他的事情总是抽不出时间.去年有过一段时间的集中学习,做了许多的练习和实验,并对基于HDevelop的形状匹配算法的参数优化进行了研究,写了一篇& ...

  6. #研发解决方案介绍#基于ES的搜索+筛选+排序解决方案

    郑昀 基于胡耀华和王超的设计文档 最后更新于2014/12/3 关键词:ElasticSearch.Lucene.solr.搜索.facet.高可用.可伸缩.mongodb.SearchHub.商品中 ...

  7. DevExpress.LookUpEdit控件实现自动搜索定位功能 兼使用方法（looUpEdit可编辑）

    DevExpress.LookUpEdit 使用方法 设置可手动输入 this.LookUpEdit1.Properties.TextEditStyle = DevExpress.XtraEditor ...

  8. YII关联字段并带搜索排序功能

    1.简介 从接触yii框架到现在已经快有两个月了,但是自己对yii框架的了解程度并不是很深,并没有系统地去学习,仅仅只是在做项目的时候遇到不懂得知识才去翻手册. 在上一个项目中因为需要将关联的表的字段 ...

  9. Halcon编程-基于形状特征的模板匹配

    halcon软件最高效的一个方面在于模板匹配,号称可以快速进行柔性模板匹配,能够非常方便的用于缺陷检测.目标定位.下面以一个简单的例子说明基于形状特征的模板匹配.      为了在右图中,定位图中的三 ...

随机推荐

  1. SQL Server中的@@ROWCOUNT

    SQL Server中@@ROWCOUNT返回受上一语句影响的行数,返回值类型为 int 整型. 如果行数大于 20 亿,则需要使用 ROWCOUNT_BIG. @@ROWCOUNT和@@ERROR变 ...

  2. hdu 4430 Yukari's Birthday 枚举+二分

    注意会超long long 开i次根号方法,te=(ll)pow(n,1.0/i); Yukari's Birthday Time Limit: 12000/6000 MS (Java/Others) ...

  3. D3拖动效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Java中Class.this和this的区别（转）

    当inner class(内部类)必顺使用到outer class(外部类)的this instance(实例)时,或者匿名内部类要使用外部类的实例. 例: class Outer{ String d ...

  5. MySQL 为日期增加一个时间间隔

    set @dt = now(); select date_add(@dt, interval 1 day);   - 加1天 select date_add(@dt, interval 1 hour) ...

  6. hadoop优质链接

    http://wiki.apache.org/hadoop/FAQ

  7. SolidEdge 如何绘制局部视图 局部放大图

    创建局部视图(局部放大图),先选择要创建局部放大图的视图,然后绘制一个小圆,然后绘制一个大圆即可.   如果要绘制不规则形状的局部放大图,则点击了局部放大图之后,点击绘制草图的按钮   随后可以用相切 ...

  8. [ACM] ZOJ 3725 Painting Storages (DP计数+组合)

    Painting Storages Time Limit: 2 Seconds      Memory Limit: 65536 KB There is a straight highway with ...

  9. winform窗体继承泛型类时,设计器无法使用解决办法

    当我们使用winform程序时,winform窗体程序和控件程序都是可以通过设计器进行控件拖拽的,但如果我们继承了一个带有泛型的form基类.那么设计器是无法使用的. 目前我没有找到根本解决的办法,但 ...

  10. Effective C++ 条款13/14 以对象管理资源 || 在资源管理类中小心拷贝行为

    三.资源管理       资源就是一旦你使用了它,将来不用的时候必须归还系统.C++中最常用的资源就是动态内存分配.其实,资源还有 文件描述符.互斥器.图形界面中的字形.画刷.数据库连接.socket ...