<!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. Java面试集合（四）

    1. jdk,jre,jvm之间的关系 JVM是Java虚拟机,是Java跨平台的重要保障,JVM实现Java跨平台的前提,可以针对不同的操作系统,有不同的JVM. 可以说Java语言是跨平台的,但J ...

  2. 从前端中的IOC理念理解koa中的app.use()

    忙里偷闲,打开平时关注的前端相关的网站,浏览最近最新的前端动态.佼佼者,平凡的我做不到,但还是要争取不做落后者. 前端中的IoC理念,看到这个标题就被吸引了.IoC 理念,不认识呢,点击去一看,果然没 ...

  3. SWIG 基本概念和入门

    C 和 C++ 被公认为(理当如此)创建高性能代码的首选平台.对开发人员的一个常见要求是向脚本语言接口公开 C/C++ 代码,这正是 Simplified Wrapper and Interface ...

  4. Python档案袋（脚本执行和输入输出）

    脚本的执行: 1.执行时确定解释器为Python3 python3 脚本名 2.在代码开始行确定解释器为Python3,与shell相似 env命令表示全局搜索Python3解释器 #!/usr/bi ...

  5. java基础-2

    java基础-2 面向对象 定义 面向对象是一种思维方式,相对于面向过程​面向过程注重流程中的每一步,清楚流程中的每一个细节​面向对象注重的是对象,有了对象就有对象的一届​自己动手做--面向过程,找其 ...

  6. 解决 Chrome 下载不了东西 失败 - 已屏蔽 的问题

    或许你怎么也想不到是IE的问题 由于IE的安全设定问题 但是这个锅 确实不应该是IE来背. 因为我IE下载都没出现这个问题. 解决方法是这样的: IE>Internet选项>安全>自 ...

  7. 容器、容器集群管理平台与 Kubernetes 技术漫谈

    原文:https://www.kubernetes.org.cn/4786.html 我们为什么使用容器? 我们为什么使用虚拟机(云主机)? 为什么使用物理机? 这一系列的问题并没有一个统一的标准答案 ...

  8. Docker中运行nginx并挂载本地目录到镜像中

    1.1 从hup上pull镜像1.2 创建将要挂载的目录1.3 先要有配置文件才能启动容器1.3.1 vim /data/nginx/conf/nginx.conf1.3.2 vim /data/ng ...

  9. HBase 在人工智能场景的使用

    近几年来,人工智能逐渐火热起来,特别是和大数据一起结合使用.人工智能的主要场景又包括图像能力.语音能力.自然语言处理能力和用户画像能力等等.这些场景我们都需要处理海量的数据,处理完的数据一般都需要存储 ...

  10. apache用户认证访问机制(转)

    Apache服务器已经内置用户验证机制,大家只要适当的加以设置,便可以控制网站的某些部分要用户验证.前期准备,必须已经安装apache,如果还没安装,或者对安装很模糊的话,第1步:我们在/var/ww ...