vue2 前端搜索实现示例


Posted in Javascript onFebruary 26, 2018

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

其实原理很简单,小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);
          }
        }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
js选择器全面解析
Jun 27 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
用原生js做单页应用
Jan 17 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 #Javascript
vue的全局提示框组件实例代码
Feb 26 #Javascript
Angular4 ElementRef的应用
Feb 26 #Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 #Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 #Javascript
vue bus全局事件中心简单Demo详解
Feb 26 #Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 #Javascript
You might like
PHP实现二维数组去重功能示例
2017/01/12 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
用Python实现随机森林算法的示例
2017/08/24 Python
python+flask实现API的方法
2018/11/21 Python
pandas删除指定行详解
2019/04/04 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
Python实现中值滤波去噪方式
2019/12/18 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
大三自我鉴定范文
2013/10/05 职场文书
博士研究生自我鉴定范文
2013/12/04 职场文书
《三峡》教学反思
2014/03/01 职场文书
授权委托书
2014/09/17 职场文书
党员承诺书范文2015
2015/04/27 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
运动会通讯稿200字
2015/07/20 职场文书
DQL数据查询语句使用示例
2022/12/24 MySQL