<!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. CAS单点登录原理简单介绍

    1. SSO简介 1.1 单点登录定义 单点登录(Single sign on),英文名称缩写SSO,SSO的意思就是在多系统的环境中,登录单方系统,就可以在不用再次登录的情况下访问相关受信任的系统. ...

  2. leetcode69 X的平方根的几种解法

    第一种自然就是调APi啦(手动滑稽) public int mySqrt(int x) { return (int)Math.sqrt(x); } 时间是52 ms,还超过了1/5的人呢 第二种 二分 ...

  3. GODOT 3.0 开发进度汇报 #7

    由于原文采取了记流水账的方式,觉得没有必要照直翻译了,就只选取了其中的主要信息. GDNative C++ 语言绑定 进行了重写以便Godot更好的生成和处理脚本. D 语言绑定 也正在积极开发中. ...

  4. NetStandard;.netCore;FX(.netFrameWork)之间引用关系

    .NetStandard;.netCore;FX(.NetFrameWork)之间引用关系   FX引用.NetCore:不通过 NetStandard引用.NetCore:不通过   .NetCor ...

  5. Kaazing Gateway简单使用

    Kaazing GateWay是一种提供跨平台跨浏览器WebSocket支持的网关,由Java编写,介绍一下Kaazing GateWay的安装配置和简单使用,哪里说得不对,还请指出. 1. 安装 a ...

  6. Storm WordCount

    特别注意,在本地运行的时候应该去掉<scope>provided</scope>,否则会报java.lang.ClassNotFoundException: org.apach ...

  7. GitHub学习系列之如何删除那些不打算要的项目（图文详解）

    不多说,直接上干货! 1.选择我们要删除的项目: 接下来我们就删除 zlslch下面的这个hello项目.从这个项目的名字中就可以看出来,好像就是为了删除而创建的.点击右上方红框中的Settings. ...

  8. Web中的积累：外观模式 Facade

    摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠 希望转载,保留摘要,谢谢! 壹 前言 目测好久没写文章了,距离上一篇文章也有二十多天.我是怎么了?哈 ...

  9. poj1001

    #include <iostream> #include<iomanip> #include<cstring> using namespace std; int s ...

  10. DateTimeHelper

    本文参考文章: http://geekswithblogs.net/mnf/articles/my-datetimehelper-class.aspx https://referencesource. ...