最近一直在看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. 实战分析Tomcat的类加载器结构（使用Eclipse MAT验证）

    一.前言 在各种Tomcat相关书籍,书上都提到了其类加载器结构: 在Tomcat 7或者8中,共享类和Catalina类加载器在catalina.properties中都是没配置的,请看: 所以,c ...

  2. Laravel 静态资源管理

    <link rel="stylesheet" href="{{ asset('bootstrap/css/bootstrap.min.css') }}" ...

  3. HTML 中 SELECT 选项分组

    <select name="viewType"> <option value selected>选择排序/显示方式</option> <o ...

  4. CODEVS_1033 蚯蚓的游戏问题 网络流 最小费用流 拆点

    原题链接:http://codevs.cn/problem/1033/ 题目描述 Description 在一块梯形田地上,一群蚯蚓在做收集食物游戏.蚯蚓们把梯形田地上的食物堆积整理如下: a(1,1 ...

  5. crontab 实际的应用

    每二天执行一次: 0 0 */2 * * command #注意分,时不能为星*,否则每分钟执行 每天零晨01,03执行: 0 01,03 * * * command 每2小时执行一次 0 */2 * ...

  6. Win7 VNC远程连接Centos桌面

    一,安装Linux桌面: yum -y groupinstall Desktop yum -y groupinstall "X Window System" yum -y grou ...

  7. python—networkx：依据图的权重绘图

    首先输入边和边的权重,随后画出节点位置.依据权重大小划分实边和虚边 #coding:utf-8 #!/usr/bin/env python """ An example ...

  8. easyui datagrid client搜索、分页、排序

    easyui datagrid的排序默认是server端排序.能够用sorter实现client排序[2].client分页可用filter实现[3].client搜索相同能够用filter实现. 不 ...

  9. AppCan移动应用开发平台新增9个超有用插件（内含演示样例代码）

    使用AppCan平台进行移动开发.你所须要具备的是Html5+CSS +JS前端语言基础.此外.Hybrid混合模式应用还需结合原生语言对功能模块进行封装,对于没有原生基础的开发人员,怎样实现App里 ...

  10. Atlassian Confluence安装

    前言 Confluence与Jira 由于线上jira和confluence之前互相关联,confluence的登录用户全部关联自jira的用户,confluence安装时会提示是否关联jira,由于 ...