基于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实现分割提取页面所需内容
May 09 Javascript
brook javascript框架介绍
Oct 10 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
php 表单验证实现代码
2009/03/10 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
Js 刷新框架页的代码
2010/04/13 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
日语系毕业求职信
2014/07/27 职场文书
2014年环卫工作总结
2014/11/22 职场文书
高老头读书笔记
2015/06/30 职场文书
医院消毒隔离制度
2015/08/05 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
导游词之凤凰古城
2019/10/22 职场文书
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL