vue2 前端搜索实现
项目数据少的时候,搜索这样的小事情就要交给咱们前端来做了,重要声明,适用于小项目!!!!!
其实原理很简单,小demo是做搜索市区名称或者按照排名搜索。
<div>
<input type="text" v-model="name" placeholder="点击搜索按钮筛选" />
<input type="button" @click="search" />
</div>
<table>
<tbody>
<tr v-for="item in listt0">
<td>
<a v-text="item.sort"></a>
</td>
<td>
<a v-text="item.City"></a>
</td>
<td>
<a :style="{'color':item.sort<=10?'#f2972e':''}" v-cloak>{{item.Data | two}}</a>
</td>
<td><span v-text="item.Good"></span></td>
</tr>
</tbody>
</table>
页面布局成功之后,就是要做js配置了,首先是data初始化。
data:{
list0:[],//原始
listt0:[],//处理过的
name:'',//搜索框内容
},
接下来获取后台数据,后台数据必须是一次性传递给前端,原因你懂的。
created:function(){
//这获取数据且list0以及listt0都为获取到的数据
},
搜索的实现,判断如果是数字就按照sort搜索,不是数字则按照city搜索。一个简单的搜索就完成了。
methods:{
search:function(){//搜索
var _this=this;
var tab=this['list0'];
if(this.name){
_this['listt0']=[];
if(!isNaN(parseInt(_this.name))) {
for(i in tab) {
if(tab[i].sort == parseInt(_this.name)) {
_this['listt0'].push(tab[i]);
};
};
} else {
for(i in tab) {
if(tab[i].City.indexOf(_this.name) >= 0) {
_this['listt0'].push(tab[i]);
};
};
};
}else{
alert('请输入筛选条件!')
};
}
},
小知识点:
1. :style="{'color':item.sort<=10?'#f2972e':''}" :style设置前10名的文字颜色。
2. !isNaN(parseInt(_this.name)) 判断输入的是数字还是文字,如果有数字就会按照数字搜索。
3.过滤器two
filters: {//保留两位小数点
two : function(value){
if (!value) { return ''};
return value.toFixed(2);
}
}
vue2 前端搜索实现的更多相关文章
- js实现table中前端搜索(模糊查询)
项目中用到js前端搜索功能,根据 姓名或姓名 进行 搜索,实现方法如下,遍历table所有行中的某列,符合条件则置tr为display:'',不满足条件置tr为display:none. 代码如下: ...
- bootstrap table 前端搜索
1.bootstrap-table对于前端的搜索可以通过官网设置,但发现前端搜索出现bug,网上找到一个bootstrap-table的扩充js bootstrap-table-mytoolbar. ...
- jQuery实现简单前端搜索功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue+element的表格分页和前端搜索
1.前端后台管理会存在很多表格,表格数据过多就需要分页;2.前端交互每次搜索如果都请求服务器会加大服务器的压力,所以在数据量不是很大的情况下可以一次性将数据返回,前端做检索3.下面贴上一个demo & ...
- 一言不合就动手系列篇一-仿电商平台前端搜索插件(filterMore)
话说某年某月某日,后台系统需要重构,当时公司还没有专业前端,由我负责前台页面框架搭建,做过后台系统的都知道,传统的管理系统大部分都是列表界面和编辑界面.列表界面又由表格和搜索框组成, 对于全部都是输入 ...
- html中layui+jfinal模板实现前端搜索功能
<input type="text" id="campus" class="layui-input" onkeyup="ck ...
- odoo开发笔记--前端搜索视图--按照时间条件筛选
odoo在日常使用中,常会有这样的需要,比如,某个列表按照 日 .周.月.年来过滤搜索. 效果: 那么如何实现呢,如下是一段不同写法的样例代码,提供参考. <!--某模型 搜索视图--> ...
- 前端 搜索样式 html
原文:https://blog.csdn.net/linlinxie/article/details/77484214?utm_source=blogkpcl4 测试1: <div class= ...
- vue2实现搜索结果中的搜索关键字高亮
// 筛选变色 brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && k ...
随机推荐
- js 几种排序方法
1.冒泡排序 var arr = [9, 7, 5, 3, 1]; for (var i = 0; i < arr.length - 1; i++) { for (var j = 0; j &l ...
- 【HDU4622】Reincarnation(后缀自动机)
[HDU4622]Reincarnation(后缀自动机) 题面 Vjudge 题意:给定一个串,每次询问l~r组成的子串的不同子串个数 题解 看到字符串的大小很小 而询问数太多 所以我们预处理任意的 ...
- 清橙A1202&Bzoj2201:彩色圆环
因为Bzoj是权限题,所以可以去清橙做一下 Sol 突然考了一道这样的题,考场上强行\(yy\)出来了 win下评测Long double爆零TAT 首先肯定是破环为链变成序列问题辣 那么就要求第一个 ...
- WPF-悬浮窗(类似于360)
boss要求开发一个类似于360的悬浮窗,如下图所示: 目前采用的是wpf做的客户端,之前有个winform的项目,我参考了下,完成了wpf版的悬浮窗. Height=" WindowSta ...
- intellij idea快捷键字典
最近在重装系统,在安装python IDE时候依然安装了sublime Text3和intellij Idea(冏,别问为什么没安装pycharm,0-0 逃).首先是已然将之前一直使用的sublim ...
- 2018-3 WebStorm最新版本破解方法
今天重新打开WebStorm发现之前输入的License Server没法用了,不能通过WebStorm的检测,搜索良久,终于找到了最新版本WebStorm的破解方法. 在激活页面选择License ...
- lvm创建卷组和格式化
* 前提条件:/dev/sdb为一块空的硬盘 * 创建物理卷:pvcreate /dev/sdb * 创建卷组:vgcreate vol_name /dev/sdb (vol_name 为卷组名字) ...
- Prototype模式
浅克隆:对值类型的成员变量进行值的复制,对引用类型的成员变量只复制引用,不复制引用的对象.深克隆:对值类型的成员变量进行值的复制,对引用类型的成员变量也进行引用对象的复制. /** * Created ...
- UML系列图2
时序图: 用例图:
- Keeweb-Linux的密码管理器
Keeweb-Linux的密码管理器 如今,我们依赖于越来越多的线上服务.我们每注册一个线上服务,就要设置一个密码:如此,我们就不得不记住数以百计的密码.这样对于每个人来说,都很容易忘记密码.那么,下 ...