基于Vuejs的搜索匹配功能

最近一直在看vue，查了很多资料，看了很多文档和博客，大概半知半解了，然后利用所理解的知识写了一个简单的搜索匹配功能。大概长这个样子：数据都是假的代码部分（注意我引用的是本地vue.min.js文件，请注意文件路径。）<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue测

here962464

29253人浏览 · 2017-10-13 21:49:32

here962464 · 2017-10-13 21:49:32 发布

最近一直在看vue，查了很多资料，看了很多文档和博客，大概半知半解了，然后利用所理解的知识写了一个简单的搜索匹配功能。
大概长这个样子：
这里写图片描述
数据都是假的

代码部分
（注意我引用的是本地vue.min.js文件，请注意文件路径。）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue测试2</title>
        <script type="text/javascript" src="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>

其实核心算法还是用原生JS写的，vue提供了很强大的数据绑定方法，但是如果只知道vue这个框架，没有自己的核心思想的话，还是没多大用处的，所以作者在官方文档里面说希望我们是有一定JS基础的。我还是觉得前端框架再多，最厉害的永远是原生JS。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^