基于Vuejs的搜索匹配功能实现方法


Posted in Javascript onMarch 03, 2018

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

大概长这个样子:

基于Vuejs的搜索匹配功能实现方法

数据都是假的

代码部分

(注意我引用的是本地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。

以上这篇基于Vuejs的搜索匹配功能实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
JavaScript基本编码模式小结
May 23 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
vue.js select下拉框绑定和取值方法
Mar 03 #Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 #Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 #Javascript
JS表单传值和URL编码转换
Mar 03 #Javascript
jQuery实现左右滑动的toggle方法
Mar 03 #jQuery
vue中实现移动端的scroll滚动方法
Mar 03 #Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 #Javascript
You might like
十天学会php(3)
2006/10/09 PHP
用PHP制作静态网站的模板框架(一)
2006/10/09 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
django中嵌套的try-except实例
2020/05/21 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
Python实现自动签到脚本功能
2020/08/20 Python
西雅图的买手店:Totokaelo
2019/10/19 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
营业员个人总结的自我评价
2013/10/25 职场文书
大学生就业自荐信
2013/10/26 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
教师三严三实心得体会
2014/10/11 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
民间借贷被告代理词
2015/05/23 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
如何在Python中妥善使用进度条详解
2022/04/05 Python