用vue实现简单分页

在这个demo中，我用vue对一个json文件中的数据进行了简单的分页，没用用到交互，一下是我的实现过程。

基础逻辑

1.将json文件引入app.vue,并作为data返回

data(){
      var testData = require("../test.json");
      return {testData}
    },

2.将testData使用v-for呈递在页面上

<table>
      <tr v-for="(item,index) in testData">
        <td v-for="items in item">
          {{items}}
        </td>
      </tr>
    </table>

3.用v-if判断显示条数

<table>
      <tr v-for="(item,index) in testData" v-if="index>=0&&index<10">
        <td v-for="items in item">
          {{items}}
        </td>
      </tr>
    </table>

4.我考虑到vue双向数据绑定的特点，所以想到改变v-if中大于和小于两个值就可以实现分页了，所以我把这两个值改成了变量，通过点击上一页下一页改变变量的值。

<table>
      <tr v-for="(item,index) in testData" v-if="index>=begin&&index<end">
        <td v-for="items in item">
          {{items}}
        </td>
      </tr>
</table>
<input type="button" value="上一页" @click="decrement">
<input type="button" value="下一页" @click="increment">

5.我开始直接把decrement和increment函数放在方法里面，结果发现根本改变不了begin和end的值。于是我用了vuex.

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);
var state = {
	front:0,
	count:10
};//设置初始数字

const mutations = {
	increment(state) {//处理数据变化的函数
		state.front = state.front+10;
		state.count=state.count+10;
	},
	decrement(state) {
		state.front = state.front-10;
		state.count=state.count-10;
	}
};

const actions =  {//处理你要干什么
	increment:({commit})=> {
		commit('increment');
	},
	decrement:({commit}) => {
		commit('decrement');
	},
	clickAsync: ({commit}) => {
		new Promise((resolve) => {
			setTimeout(function(){
				commit('increment');
				resolve();
			},1000);
		})
	}
}

const getters = {
	begin(state) {
		return state.front;
	},
	end(state) {
		return state.count;
	}
};

//需要导出Store对象
export default new Vuex.Store({
	state,
	mutations,
	actions,
	getters
});

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  el: '#app',
  render: h => h(App)
})

app.vue

<template>
  <div id="app">
    <input type="button" value="上一页" @click="decrement">
    <button>第{{end/10}}页</button>
    <input type="button" value="下一页" @click="increment">
    <table>
      <tr v-for="(item,index) in testData" v-if="index>=begin&&index<end">
        <td v-for="items in item">
          {{items}}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'
  export default {
    data(){
      var testData = require("../test.json");
      return {testData}
    },
    computed:mapGetters([//管理所有的事件
      'begin',
      'end'
    ]),
    methods:mapActions([//获取数据
      'increment',
      'decrement',
      'clickOdd',
      'clickAsync'
    ])
  }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

这样，一个简单的分页就实现了