github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/themes/wind/static/libs/vue-1.0.24/examples/grid/index.html (about)

     1  <!DOCTYPE html>
     2  <html lang="en">
     3    <head>
     4      <meta charset="utf-8">
     5      <title>Vue.js grid component example</title>
     6      <link rel="stylesheet" href="style.css">
     7      <script src="../../dist/vue.js"></script>
     8      </head>
     9    <body>
    10  
    11      <!-- component template -->
    12      <script type="text/x-template" id="grid-template">
    13        <table>
    14          <thead>
    15            <tr>
    16              <th v-for="key in columns"
    17                @click="sortBy(key)"
    18                :class="{active: sortKey == key}">
    19                {{key | capitalize}}
    20                <span class="arrow"
    21                  :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
    22                </span>
    23              </th>
    24            </tr>
    25          </thead>
    26          <tbody>
    27            <tr v-for="
    28              entry in data
    29              | filterBy filterKey
    30              | orderBy sortKey sortOrders[sortKey]">
    31              <td v-for="key in columns">
    32                {{entry[key]}}
    33              </td>
    34            </tr>
    35          </tbody>
    36        </table>
    37      </script>
    38  
    39      <!-- demo root element -->
    40      <div id="demo">
    41        <form id="search">
    42          Search <input name="query" v-model="searchQuery">
    43        </form>
    44        <demo-grid
    45          :data="gridData"
    46          :columns="gridColumns"
    47          :filter-key="searchQuery">
    48        </demo-grid>
    49      </div>
    50  
    51      <script src="grid.js"></script>
    52  
    53    </body>
    54  </html>