Vue.js 结合bootstrap 前端实现分页效果

Vue.js 结合bootstrap 前端实现分页和排序效果

写之前先抱怨几句。本来一心一意做.net开发的，渐渐地成了只做前端。最近项目基本都用java做后台，我们这些.net的就成了前端，不是用wpf做界面，就是用html写web页面。
深知自己前端技术不足，以前虽说用asp.net前后台都做，但是，对于前端都是用现成的js库和页面模板，对于vue.js等框架基本没有接触过。
只怪自己不会写java，最近做一个项目，负责前端，后台传来数据不分页，前端收到所有数据后自己分页。我尽是无语。
正好最近在看vue.js。这个页面就用它来实现吧。顺便总结下。
排序从下图中可以看出来，只是字符串的排序，没有实现数字的排序，知道如何用vue.js在前端解决的朋友希望赐教

语法

• 数据绑定 { {...}}或者v-model

<td >{
   
   {
   
   dataItem.id}}</td>
<input v-model="message">

• 事件绑定 v-on

<th v-on:click="sortBy('id')">ID</th>

• 循环 v-for

<option v-for="item in arrPageSize" value="{
   
   {
   
   item}}">{
   
   {
   
   item}}</option>

• 判断 v-if

<span v-if="item==1" class="btn btn-default" v-on:click="showPage(1,$event)">首页</span>

• 过滤器 Vue.filter

//定义
Vue.filter( 'name' , function(value) {
   
   
        return value  * .5 ;
  });
//使用
<td>{
  
  {dataItem.age | name}}</td>
<input v-model="message | name">

• 排序 orderBy

<tr v-for="dataItem in arrayData | orderBy sortparam sorttype">
                        <td >{
   
   {
   
   dataItem.id}}</td>
                        <td >{
   
   {
   
   dataItem.name}}</td>
                        <td>{
   
   {
   
   dataItem.age}}</td>
                    </tr>

html

<div id="test" class="form-group">
            <div class="form-group">
                <div class="page-header">
                    数据
                </div>