基于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 相关文章推荐
jquery JSON的解析方式
Jul 25 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
JS中的模糊查询功能
Dec 08 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
vue实现广告栏上下滚动效果
Nov 26 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+javascript的日历控件
2009/11/19 PHP
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
日期和时间问题
2015/01/04 面试题
人事部主管岗位职责
2013/12/26 职场文书
销售会计岗位职责
2014/03/15 职场文书
平安工地建设方案
2014/05/06 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
放假通知范文
2015/04/14 职场文书
学校百日安全活动总结
2015/05/07 职场文书
早上好问候语大全
2015/11/10 职场文书
如何书写邀请函?
2019/06/24 职场文书