<!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: 'Jackie Chan', power: 7000 },

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

    ]

  }

})

</script>

</body>

</html>

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

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

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

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

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

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

  3. 利用css实现搜索过滤

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

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

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

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

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

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

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

  7. Linux常用指令---grep(搜索过滤)

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

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

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

  9. Linux常用指令grep(搜索过滤)

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

随机推荐

  1. 吴恩达机器学习笔记34-模型选择和交叉验证集（Model Selection and Train_Validation_Test Sets）

    假设我们要在10 个不同次数的二项式模型之间进行选择: 显然越高次数的多项式模型越能够适应我们的训练数据集,但是适应训练数据集并不代表着能推广至一般情况,我们应该选择一个更能适应一般情况的模型.我们需 ...

  2. 使用FileZilla从Linux系统下载文件

    需求:将Linux系统的的某个文件夹(里面包含文件夹和文件)下载到我Windows系统某个文件夹里 之前我使用xshell下载,但是通过 rz :上传sz:下载 命令中的sz命令,下载失败. 下载 c ...

  3. Kubenetes---Service

    kubernetes的service有三种代理模式 userspace , iptables , ipvs ---------------------------------------------- ...

  4. Python super() 函数的概念和例子

    概念: super() 函数是用于调用父类(超类)的一个方法. super 是用来解决多重继承问题的,直接用类名调用父类方法在使用单继承的时候没问题,但是如果使用多继承,会涉及到查找顺序(MRO).重 ...

  5. chrome浏览器被reimage pair 劫持怎么处理

    不知道什么原因chrome浏览器被reimage pair劫持了,只要在浏览器内部一按回车,就马上进入了reimage pair下载的界面. 在网上找了很多解决方法,最后才在google的chrome ...

  6. 机器学习入门13 - 正则化：稀疏性 (Regularization for Sparsity)

    原文链接:https://developers.google.com/machine-learning/crash-course/regularization-for-sparsity/ 1- L₁正 ...

  7. Robot Framework - 一些练习

    01 - 安装Robot Framework TA环境 根据系统请选择对应的版本包来安装,下面是以Win7-64bit系统为例,来说明如何搭建一个可以运行练习三test case的RF TA环境. 1 ...

  8. Web存储及文件拖拽

    存储 实现内容的永久保存(localStorage) 保存: localStorage.自定义键名="123"; 获取: //判断是否有内容 if(localStorage.自定义 ...

  9. 阿里巴巴是如何打通 CMDB，实现就近访问的？

    CMDB在企业中,一般用于存放与机器设备.应用.服务等相关的元数据.当企业的机器及应用达到一定规模后就需要这样一个系统来存储和管理它们的元数据.有一些广泛使用的属性,例如机器的IP.主机名.机房.应用 ...

  10. 解决方案：ppt打不开，显示发现文件中的内容有问题。可尝试修复此演示文稿

    ppt打不开,显示发现文件中的内容有问题.可尝试修复此演示文稿 故障截图如下: 解决方法: 主要是因为文件是网络下载的,office自动锁定了文件(默认不可编辑).在文件上右键-属性-解除锁定(最下面 ...