<!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. 第64节:Java中的Spring Boot 2.0简介笔记

    Java中的Spring Boot 2.0简介笔记 spring boot简介 依赖java8的运行环境 多模块项目 打包和运行 spring boot是由spring framework构建的,sp ...

  2. 《http权威指南》读书笔记8

    概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...

  3. JavaScript深入(操作BOM对象)

    浏览器对象模型(BOM) BOM的核心是window, 向下有: document(文档):document下由button,text,from,等等表单元素组成. location(地址对象),hi ...

  4. JDK9新特性实战：流关闭新姿势

    做Java开发的都知道,每个资源的打开都需要对应的关闭操作,不然就会使资源一直占用而造成资源浪费,从而降低系统性能. 关于资源的关闭操作,从JDK7-JDK9有了不少的提升及简化. JDK6 在JDK ...

  5. Python文件操作与函数目录

    文件操作 python文件操作 函数 Python函数学习——初步认识 Python函数学习——作用域与嵌套函数 Python函数学习——匿名函数 python内置函数 Python函数学习——递归 ...

  6. react-native热更新之CodePush详细介绍及使用方法

    react-native热更新之CodePush详细介绍及使用方法 2018年03月04日 17:03:21 clf_programing 阅读数:7979 标签: react native热更新co ...

  7. pip install 安装出现问题：UnicodeEncodeError: 'ascii' codec can't encode characters in position XX的解决办法

    pip install 安装出现问题:UnicodeEncodeError: 'ascii' codec can't encode characters in position XX的解决办法 转自c ...

  8. Android Metro风格的Launcher开发系列第三篇

    前言: 各位小伙伴,又到了每周更新文章了时候了,本来是周日能发出来呢,这不是赶上清明节吗,女王大人发话了,清明节前两天半陪她玩,只留给我周一下午半天时间写博客,哪里有女王哪里就有压迫呀有木有!好了闲话 ...

  9. ajax实现文档导出及下载

    做导出一直遇到个问题就是不能用ajax实现一步导出文档,即导出加下载.今天突然想到可以分开来做就上网搜了下,发现一篇比较不错的文章(http://www.cnblogs.com/zj0208/p/59 ...

  10. Java中的instanceof和isInstance基础讲解

    1. instanceof 是一个操作符 使用方法: ? 1 2 if(a instanceof B){ } 表示:a 是不是 B 这种类型 2. isInstance是Class类的一个方法 ? 1 ...