vuejs 1.x - 实例：搜索过滤

时间：2022-09-28 23:47:57
<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

<meta charset="utf-8">

<title></title>

<meta name="keywords" content="" />

<meta name="description" content="" />

<link rel="stylesheet" href="css/reset.css" type="text/css" />

<script type="text/javascript" src="js/vue.min.js"></script>

<style>

body {

  font-family: '微软雅黑';

  font-size: 14px;

  color: #444;

}

table {

  border: 2px solid #42b983;

  border-radius: 3px;

  background-color: #fff;

}

table th{padding:10px 50px;}

table td{padding:10 50px;}

</style>

</head>

<body>

<script type="text/x-template" id="grid-template">

  <table>

    <thead>

      <tr>

        <th v-for="key in columns" @click="sortBy(key)" :class="{active: sortKey == key}">

          {{key | capitalize}}

          <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"></span>

        </th>

      </tr>

    </thead>

    <tbody>

      <tr v-for="entry in data | filterBy filterKey | orderBy sortKey sortOrders[sortKey]">

        <td v-for="key in columns">{{entry[key]}}</td>

      </tr>

    </tbody>

  </table>

</script>

<div id="demo" style="width:500px;margin:0 auto;padding:10px;">

  <form id="search" style="margin-bottom: 30px;">

    Search <input name="query" v-model="searchQuery">

  </form>

  <demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery"></demo-grid>

</div>

<script type="text/javascript">

    Vue.component('demo-grid', {

      template: '#grid-template',

      props: {

        data: Array,

        columns: Array,

        filterKey: String

      },

      data: function () {

        var sortOrders = {}

        this.columns.forEach(function (key) {

          sortOrders[key] = 1;

        })

        return {

          sortKey: '',

          sortOrders: sortOrders

        }

      },

      methods: {

        sortBy: function (key) {

          this.sortKey = key;

          this.sortOrders[key] = this.sortOrders[key] * -1;

        }

      }

    })

var demo = new Vue({

  el: '#demo',

  data: {

    searchQuery: '',

    gridColumns: ['name', 'power'],

    gridData: [

      { name: 'Chuck Norris', power: Infinity },

      { name: 'Bruce Lee', power: 9000 },

      { name: '*', power: 7000 },

      { name: 'Jet Li', power: 8000 }

    ]

  }

})

</script>

</body>

</html>

结果如图所示，可以搜索过滤，点击table th可以降序，升序排列当前列

vuejs 1.x - 实例：搜索过滤

vuejs 1.x - 实例：搜索过滤的更多相关文章

  1. 搜索过滤grep（win下为findstr）

    搜索过滤grep(win下为findstr) 1.主要参数 [options]主要参数: -c:只输出匹配行的计数. -i:不区分大小写 -h:查询多文件时不显示文件名. -l:查询多文件时只输出包含 ...

  2. 【前端】Vue&period;js实现实例搜索应用

    实例搜索应用 实现效果: 实现代码与注释: <!DOCTYPE html> <html> <head> <title>实例搜索</title&gt ...

  3. 利用css实现搜索过滤

    无意中找到一种利用css就可实现的搜索过滤的方法,不得不说看了代码之后确实被惊艳到了,亏我之前面试还因为做这个功能做太慢而拖了后腿.在此记录下代码: <!DOCTYPE html> &lt ...

  4. DRF框架&lpar;八&rpar;——drf-jwt手动签发与校验、搜索过滤组件、排序过滤组件、基础分页组件

    自定义drf-jwt手动签发和校验 签发token源码入口 前提:给一个局部禁用了所有 认证与权限 的视图类发送用户信息得到token,其实就是登录接口,不然进不了登录页面 获取提交的username ...

  5. Django（67）drf搜索过滤和排序过滤

    前言 当我们需要对后台的数据进行过滤的时候,drf有两种,搜索过滤和排序过滤. 搜索过滤:比如我们想返回sex=1的,那么我们就可以从所有数据中进行筛选 排序过滤:比如我们想对价格进行升序排列,就可以 ...

  6. asp&period;net正则表达式提取网页网址、标题、图片实例以及过滤所有HTML标签实例

    无论你用什么语言,正则表达式的处理方法都是非常灵活.高效的,尤其是对某些字符串的抓取.过滤方面,更显其优势. 正则表达式的写法通常比较简单,几行短代码便能轻松完成看似很复杂的事情,更值得称赞的是,它的 ...

  7. Linux常用指令---grep&lpar;搜索过滤&rpar;

    Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...

  8. 整理grep实战文本搜索过滤技巧

    一:grep的简介: 文本搜索工具,根据用户指定的文本模式对目标文件进行逐行搜索,显示能够被模式所匹配到的行.配合正则表达式的使用可以实现强大的文本处理.下面一一说明正则的例子. 二:文本处理工具分类 ...

  9. Linux常用指令grep&lpar;搜索过滤&rpar;

    Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...

随机推荐

  1. C&plus;&plus; JsonCpp 使用&lpar;含源码下载&rpar;

    C++ JsonCpp 使用(含源码下载) 前言 JSON是一个轻量级的数据定义格式,比起XML易学易用,而扩展功能不比XML差多少,用之进行数据交换是一个很好的选择JSON的全称为:JavaScri ...

  2. 学习笔记4&lowbar;ServletContext（重要整个Web应用的动态资源之间共享数据）

    ServletContext(重要) 一个项目只有一个ServletContext对象! 我们可以在N多个Servlet中来获取这个唯一的对象,使用它可以给多个Servlet传递数据! 与天地同寿!! ...

  3. HTML 5 video 视频标签全属性详解

    Video标签的使用 Video标签含有src.poster.preload.autoplay.loop.controls.width.height等几个属性, 以及一个内部使用的标签<sour ...

  4. 如何基于对话框的project基于改变BCG的

    一,stdafx.h 增加在下面的例子.BCGCBProInc.h间接介绍lib.   #include <BCGCBProInc.h> // BCGControlBar Pro #if ...

  5. 华为OJ&colon; 公共字符串计算

    有几个需要注意的地方,这个问题是不是大写和小写之间的区别.这样你就输入字符串大写或小写转换的计算前. 第二个,定要清晰.先将s1从[i]处開始与s2的[j]開始匹配,不相等则j++直到j等于s2.le ...

  6. （一）ROS系统入门 Getting Started with ROS 以Kinetic为主更新 附课件PPT

    ROS机器人程序设计(原书第2版)补充资料 教案1 ROS Kinetic系统入门 ROS Kinetic在Ubuntu 16.04.01 安装可参考:http://blog.csdn.net/zha ...

  7. SAP MM 公司间STO里交货单PGI之后自动触发内向交货单功能的实现

    SAP MM 公司间STO里交货单PGI之后自动触发内向交货单功能的实现 笔者所在的项目上的公司间STO的流程里,发货公司在做PGI之后系统自动触发收货公司的内向交货单.这个功能是通过交货单的Outp ...

  8. 【问题解决方案】之 hadoop 用jps命令后缺少namenode的问题

    用Xshell连接腾讯cloud里的虚拟机后,jps命令查无namenode导致过滤排序程序跑不起来,如图: 解决方案: Google之,说需要重启,格式化后再启动Hadoop.但鉴于本人不知道实现的 ...

  9. java基础----&gt&semi;String中replace和replaceAll方法

    这里面我们分析一下replace与replaceAll方法的差异以及原理. replace各个方法的定义 一.replaceFirst方法 public String replaceFirst(Str ...

  10. 重装系统之win10不能进入bios界面

    原因 自Win10发布以来,新出厂的预装Win10的电脑都默认在UEFI模式下启动操作系统.UEFI启动是一种新的主板引导项,正被看做是有近20多年历史的BIOS 的继任者.顾名思义,快速启动是可以提 ...

相关文章