基于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 常见开发使用技巧总结
Dec 26 Javascript
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 Javascript
Javascript call及apply应用场景及实例
Aug 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
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
php 发送带附件邮件示例
2014/01/23 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
python 全文检索引擎详解
2017/04/25 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
python获取中文字符串长度的方法
2018/11/14 Python
python交换两个变量的值方法
2019/01/12 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
材料加工硕士生求职信
2013/10/10 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
求职信模板
2014/05/23 职场文书
推广活动策划方案
2014/08/23 职场文书
公司证明怎么写
2014/09/22 职场文书
捐款仪式主持词
2015/07/04 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
Node.js实现断点续传
2021/06/23 Javascript