<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div class="DiReactPage-btn">下一页</div>
<div class="DiReactPage-btn">最后一页</div>
<div class="DiReactPage-btn">总4页</div>
<input class="DiReactPage-input" type="text" />
<button class="DiReactPage-btn">跳转</button>
</div>
</template>
<script>
export default {
name: 'divuePage',
data () {
return {
pages:[1,2,3,4,5] }
},
methods:{
}
}
</script>
<style>
.DiReactPage{ height:30px; line-height:30px; text-align:center;}
.DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
.DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
.DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
.DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
.DiReactPage .DiReactPage-page span.active{ color:#09F; }
.DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>
main.js注册：
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import pageHome from './pageHome.vue'
import pageNews from './pageNews.vue'
import pageInfo from './pageInfo.vue'
//注册组件
import divuePage from './divuePage.vue'
Vue.component('divue-page', divuePage)
//路由配置
Vue.use(VueRouter);
var routes = [
{ path: '/', component: pageHome},
{ path: '/pageNews', component: pageNews},
{ path: '/pageInfo', component: pageInfo}
]var router = new VueRouter({
routes: routes // （缩写）相当于 routes: routes
})
new Vue({
el: '#app',
router,
render: h => h(App)
})pageHome.vue引用：
<template>
<div class="page">
<p>//模拟ajax数据 1-7页</p>
<ul class="ull">
<li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">内容：{{item.text}}</span></li>
</ul>
<divue-page></divue-page>
</div>
</template>
<script>
export default {
name: 'pageHome',
data () {
return {
currentpage:0,
list: [],
allpage:"",
nextpage:false
}
},
methods:{
getajaxlist:function(currentpage){
var that=this;
