项目数据少的时候,搜索这样的小事情就要交给咱们前端来做了,重要声明,适用于小项目!!!!!

其实原理很简单,小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 前端搜索实现的更多相关文章

  1. js实现table中前端搜索(模糊查询)

    项目中用到js前端搜索功能,根据 姓名或姓名 进行 搜索,实现方法如下,遍历table所有行中的某列,符合条件则置tr为display:'',不满足条件置tr为display:none. 代码如下: ...

  2. bootstrap table 前端搜索

    1.bootstrap-table对于前端的搜索可以通过官网设置,但发现前端搜索出现bug,网上找到一个bootstrap-table的扩充js  bootstrap-table-mytoolbar. ...

  3. jQuery实现简单前端搜索功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue+element的表格分页和前端搜索

    1.前端后台管理会存在很多表格,表格数据过多就需要分页;2.前端交互每次搜索如果都请求服务器会加大服务器的压力,所以在数据量不是很大的情况下可以一次性将数据返回,前端做检索3.下面贴上一个demo & ...

  5. 一言不合就动手系列篇一-仿电商平台前端搜索插件(filterMore)

    话说某年某月某日,后台系统需要重构,当时公司还没有专业前端,由我负责前台页面框架搭建,做过后台系统的都知道,传统的管理系统大部分都是列表界面和编辑界面.列表界面又由表格和搜索框组成, 对于全部都是输入 ...

  6. html中layui+jfinal模板实现前端搜索功能

    <input type="text" id="campus" class="layui-input" onkeyup="ck ...

  7. odoo开发笔记--前端搜索视图--按照时间条件筛选

    odoo在日常使用中,常会有这样的需要,比如,某个列表按照 日 .周.月.年来过滤搜索. 效果: 那么如何实现呢,如下是一段不同写法的样例代码,提供参考. <!--某模型 搜索视图--> ...

  8. 前端 搜索样式 html

    原文:https://blog.csdn.net/linlinxie/article/details/77484214?utm_source=blogkpcl4 测试1: <div class= ...

  9. vue2实现搜索结果中的搜索关键字高亮

    // 筛选变色 brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && k ...

随机推荐

  1. js 几种排序方法

    1.冒泡排序 var arr = [9, 7, 5, 3, 1]; for (var i = 0; i < arr.length - 1; i++) { for (var j = 0; j &l ...

  2. 【HDU4622】Reincarnation(后缀自动机)

    [HDU4622]Reincarnation(后缀自动机) 题面 Vjudge 题意:给定一个串,每次询问l~r组成的子串的不同子串个数 题解 看到字符串的大小很小 而询问数太多 所以我们预处理任意的 ...

  3. 清橙A1202&Bzoj2201:彩色圆环

    因为Bzoj是权限题,所以可以去清橙做一下 Sol 突然考了一道这样的题,考场上强行\(yy\)出来了 win下评测Long double爆零TAT 首先肯定是破环为链变成序列问题辣 那么就要求第一个 ...

  4. WPF-悬浮窗(类似于360)

    boss要求开发一个类似于360的悬浮窗,如下图所示: 目前采用的是wpf做的客户端,之前有个winform的项目,我参考了下,完成了wpf版的悬浮窗. Height=" WindowSta ...

  5. intellij idea快捷键字典

    最近在重装系统,在安装python IDE时候依然安装了sublime Text3和intellij Idea(冏,别问为什么没安装pycharm,0-0 逃).首先是已然将之前一直使用的sublim ...

  6. 2018-3 WebStorm最新版本破解方法

    今天重新打开WebStorm发现之前输入的License Server没法用了,不能通过WebStorm的检测,搜索良久,终于找到了最新版本WebStorm的破解方法. 在激活页面选择License ...

  7. lvm创建卷组和格式化

    * 前提条件:/dev/sdb为一块空的硬盘 * 创建物理卷:pvcreate /dev/sdb * 创建卷组:vgcreate vol_name /dev/sdb (vol_name 为卷组名字) ...

  8. Prototype模式

    浅克隆:对值类型的成员变量进行值的复制,对引用类型的成员变量只复制引用,不复制引用的对象.深克隆:对值类型的成员变量进行值的复制,对引用类型的成员变量也进行引用对象的复制. /** * Created ...

  9. UML系列图2

    时序图: 用例图:

  10. Keeweb-Linux的密码管理器

    Keeweb-Linux的密码管理器 如今,我们依赖于越来越多的线上服务.我们每注册一个线上服务,就要设置一个密码:如此,我们就不得不记住数以百计的密码.这样对于每个人来说,都很容易忘记密码.那么,下 ...