你的位置:首页 > 软件开发 > Java > vuejs 1.x

vuejs 1.x

发布时间:2017-02-14 00:00:19
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum ...

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='/images/loading.gif' data-original="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>

原标题:vuejs 1.x

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。