当前位置：Gxlcms > html代码 > Vuejs如何实现搜索匹配功能

Vuejs如何实现搜索匹配功能

时间：2021-07-01 10:21:17 帮助过：13人阅读

这次给大家带来Vuejs如何实现搜索匹配功能，Vuejs实现搜索匹配功能的注意事项有哪些，下面就是实战案例，一起来看一下。

最近一直在看vue，查了很多资料，看了很多文档和博客，大概半知半解了，然后利用所理解的知识写了一个简单的搜索匹配功能。

大概长这个样子：

数据都是假的

代码部分

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

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Vue测试2</title>
  6.     <script type="text/javascript" src="vue.min.js"></script>
  7.     <style type="text/css">
  8.       *{
  9.         padding: 0;
  10.         margin: 0;
  11.         font-size: 14px;
  12.         font-family: "微软雅黑";
  13.       }
  14.       #box{
  15.         width: 500px;
  16.         height: auto;
  17.         border: 1px solid #ccc;
  18.         margin: 50px auto;
  19.         padding: 10px;
  20.       }
  21.       .search{
  22.         width: 480px;
  23.         height: 100px;
  24.         text-align: center;
  25.       }
  26.       .searchBox{
  27.         width: 230px;
  28.         height: 40px;
  29.         outline: none;
  30.         text-indent: 10px;
  31.         margin-right: 20px;
  32.       }
  33.       .btn{
  34.         width: 100px;
  35.         height: 50px;
  36.         cursor: pointer;
  37.         font-size: 18px;
  38.       }
  39.       .goodsheet{
  40.         width: 500px;
  41.         height: auto;
  42.         border: 1px solid #eee;
  43.       }
  44.       .goodsheet tr td,
  45.       .goodsheet tr th{
  46.         width: 33%;
  47.         border: 1px solid #eee;
  48.         padding: 5px 10px;
  49.         text-align: left;
  50.       }
  51.       .goodsheet tr th span{
  52.         background: #ff9900;
  53.         padding: 0 6px;
  54.         color: #fff;
  55.         cursor: pointer;
  56.       }
  57.     </style>
  58.   </head>
  59.   <body>
  60.     <p id="box">
  61.       <p class="search">
  62.         <input type="text" class="searchBox" v-model="searchVal">
  63.         <button class="btn">搜 索</button>
  64.       </p>
  65.       <table class="goodsheet">
  66.         <tr>
  67.           <th>商品名</th>
  68.           <th>单价
  69.             <span @click="orderFn('price', false)">↑</span>
  70.             <span @click="orderFn('price', true)">↓</span>
  71.           </th>
  72.           <th>销量
  73.             <span @click="orderFn('sales', false)">↑</span>
  74.             <span @click="orderFn('sales', true)">↓</span>
  75.           </th>
  76.         </tr>
  77.         <tr v-for='(item, key) in list'>
  78.           <td>{{item.name}}</td>
  79.           <td>{{item.price}}</td>
  80.           <td>{{item.sales}}万</td>
  81.         </tr>
  82.       </table>
  83.     </p>
  84.     <script type="text/javascript">
  85.       var myVueTest = new Vue({
  86.         el:'#box',
  87.         data:{
  88.           goodsList:[
  89.             //假数据
  90.             {name:"三星Galaxy Note8",price:5200,sales:2.6},
  91.             {name:"iphone5s",price:2500,sales:2.2},
  92.             {name:"iphone6",price:2800,sales:1.6},
  93.             {name:"iphone6s",price:3200,sales:2.9},
  94.             {name:"iphone7",price:3800,sales:12.6},
  95.             {name:"iphone7plus",price:4200,sales:2.1},
  96.             {name:"iphone8",price:5500,sales:10.6},
  97.             {name:"华为",price:4600,sales:7.6},
  98.             {name:"小米",price:1200,sales:32.6},
  99.             {name:"OPPOR11",price:3000,sales:1.2},
  100.             {name:"vivoX20",price:3250,sales:2.9}
  101.           ],
  102.           searchVal:'',  //默认输入为空
  103.           letter:'',    //默认不排序
  104.           original:false  //默认从小到大排列
  105.         },
  106.         methods:{
  107.           orderFn(letter,original){
  108.             this.letter = letter;    //排序字段 price or sales 
  109.             this.original = original;  //排序方式 up or down
  110.           }
  111.         },
  112.         //通过计算属性过滤数据
  113.         computed:{
  114.           list: function(){
  115.             var _this = this;
  116.             //逻辑-->根据input的value值筛选goodsList中的数据
  117.             var arrByZM = [];//声明一个空数组来存放数据
  118.             for (var i=0;i<this.goodsList.length;i++){
  119.               //for循环数据中的每一项（根据name值）
  120.               if(this.goodsList[i].name.search(this.searchVal) != -1){
  121.                 //判断输入框中的值是否可以匹配到数据，如果匹配成功
  122.                 arrByZM.push(this.goodsList[i]);
  123.                 //向空数组中添加数据
  124.               }
  125.             }
  126.             //逻辑-->升序降序排列 false: 默认从小到大 true：默认从大到小
  127.             //判断，如果要letter不为空，说明要进行排序
  128.             if(this.letter != ''){
  129.               arrByZM.sort(function( a , b){
  130.                 if(_this.original){
  131.                   return b[_this.letter] - a[_this.letter];
  132.                 }else{
  133.                   return a[_this.letter] - b[_this.letter];
  134.                 }
  135.               });
  136.             }
  137.             //一定要记得返回筛选后的数据
  138.             return arrByZM;
  139.           }
  140.         }
  141.       });
  142.     </script>
  143.   </body>
  144. </html>

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

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

Vue.directive()的图文详解

使用javascript的模块加载器

以上就是Vuejs如何实现搜索匹配功能的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！