zoukankan      html  css  js  c++  java
  • 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);
                        }
                    }
  • 相关阅读:
    百练 1936 ll in All 解题报告
    百练 2804 词典 解题报告
    POJ 1226 Substrings 解题报告
    百练 2797 最短前缀 解题报告
    百练 2743 字符串判等 解题报告
    java创建线程的两种方式
    使用.Net Remoting传送Image对象
    Links [IronPython Workflow WCF]
    Hello World!
    Links [ .Net 3.0 Atlas ]
  • 原文地址:https://www.cnblogs.com/vipp/p/6644589.html
Copyright © 2011-2022 走看看