会python真的可以为所欲为0(回)
355天前
这里还有人吗1(回)
541天前这里还有人吗0(回)
541天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
765天前到处都是羊，不想上班0(回)
845天前
鸽子
0(回)
849天前<!DOCTYPE html> |
<html lang="en"> |
<head> |
<meta charset="UTF-8"> |
<title>Document</title> |
<script type="text/javascript" src="vue.js"></script> |
<style type="text/css"> |
body { |
font-family: Helvetica Neue, Arial, sans-serif; |
font-size: 14px; |
color: #444; |
} |
table { |
border: 2px solid #42b983; |
border-radius: 3px; |
background-color: #fff; |
} |
</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> |
<!-- demo root element --> |
<div id="demo"> |
<form id="search"> |
Search <input name="query" v-model="searchQuery"> |
</form> |
<demo-grid |
:data="gridData" |
:columns="gridColumns" |
:filter-key="searchQuery"> |
</demo-grid> |
</div> |
<script type="text/javascript"> |
// register the grid component |
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 |
} |
} |
}) |
// bootstrap the demo |
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> |
