vue.js - vuejs 1.x - 实例：搜索过滤 - 风雨过后见彩虹

<!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 - 实例：搜索过滤

风雨后见彩虹

引用和评论

web前端常用的五种方式搭建本地静态html页面服务器

开发插件集合

Vue.js-方法与事件

Vue使用mixins

这个前端神器，竟让滴滴、美团都爱不释手？！

使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据