效果：
代码：
1.注册一个组件
js
Vue.component('pagination',{
template:'#paginationTpl',
replace:true,
props:['cur','all','pageNum'],
methods:{
//页码点击事件
btnClick:
function(index){
if(index
!=
this.cur){
this.cur
=
index
}
}
},
watch:{
"cur"
:
function(val,oldVal)
{
this.$dispatch('page-to',
val)
}
},
computed:{
indexes
:
function(){
var
list
=
[]
//计算左右页码
var
mid
=
parseInt(this.pageNum
/
2)//中间值
var
left
=
Math.max(this.cur
-
mid,1)
var
right
=
Math.max(this.cur
+
this.pageNum
-
mid
-1,this.pageNum)
if
(right
>
this.all
)
{
right
=
this.all}
while
(left
<=
right){
list.push(left)
left
++
}
return
list
},
showLast:
function(){
return
this.cur
!=
this.all
},
showFirst:
function(){
return
this.cur
!=
1
}
}
})
模板：
<script
type="text/template"
id="paginationTpl">
<nav
v-if="all
>
1">
<ul
class="pagination">
<li
v-if="showFirst"><a
href="javascript:"
@click="cur--">«</a></li>
<li
v-for="index
in
indexes"
:class="{
'active':
cur
==
index}">
<a
@click="btnClick(index)"
href="javascript:">{{
index
}}</a>
</li>
<li
v-if="showLast"><a
@click="cur++"
href="javascript:">»</a></li>
<li><a>共<i>{{all}}</i>页</a></li>
</ul>
</nav>
</script>
HTML：
<div
id='item_list'>
...
<pagination
:cur="1"
:all="pageAll"
:page-num="10"
@page-to="loadList"></pagination>
</div>
当点击分页链接的时候，通过watch
cur，子组件分发
page-to
事件，通过
@page-to="loadList"
标签指定使用父组件
loadList
方法处理事件，父组件接收到page值然后ajax加载数据，根据服务端返回计算并更新自身的
pageAll
值，因为子组件prop通过
:all="pageAll"
动态绑定了父组件的pageAll对象，所以子组件会联动更新。
附上一个简单的表格组件例子:
var
vm
=
new
Vue({
el:
"#item_list",
data:
{
items
:
[],
//分页参数
pageAll:0,
//总页数,根据服务端返回total值计算
perPage:10
//每页数量
},
methods:
{
loadList:function(page){
var
that
=
this
$.ajax({
url
:
"/getList",
type:"post",
data:{"page":page,"perPage":this.perPage},
dataType:"json",
error:function(){alert('请求列表失败')},
success:function(res){
if
(res.status
==
1)
{
that.items
=
res.data.list
that.perPage
=
res.data.perPage
that.pageAll
=
Math.ceil(res.data.total
/
that.perPage)//计算总页数
}
}
})
},
//初始化
init:function(){
this.loadList(1)
}
}
})
vm.init()
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
Vue.js简介 vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。 一、动态参数显示 ajax异步请求后，接收到返回的data参数并显示在前端 1.1 引入js，也加入了jQuery <script type="text/javascript" src="/js/vue.min.js"></script> <script type="text/javascript" src="/js/jquery-2.1.3.js"></script> 1.2 html <div id="app"> <p>{{ message }}</p> <button v-on:click="showData">显示数据</button> </div> 1.3 JS 注意：这里JS一定要放在$(function() {})里面，或者是写到body里面 new Vue({ el: '#app', data: { message: '' }, methods: { showData: function () { var _self = this $.ajax({ type: 'GET', url: '...', success:function(data) { _self.message = JSON.stringify(data) } }) } } })二、动态列表显示 开始展示一个空白列表，ajax异步请求后，接收到返回的data列表信息并显示 2.1 引入js，也加入了jquery <script type="text/javascript" src="/js/vue.min.js"></script> <script type="text/javascript" src="/js/jquery-2.1.3.js"></script> 2.2 html <div id="app"> <table> <thead> <tr> <th style='width:3%text-align: left'>ID</th> <th style='width:5%text-align: left'>名称</th> <th style='width:10%text-align: left'>条形码</th> <th style='width:10%text-align: left'>简称</th> </tr> </thead> <tbody> <tr v-for="goods in goodsList"> <td>{{goods.id}}</td> <td>{{goods.name}}</td> <td>{{goods.barcode}}</td> <td>{{goods.shortName}}</td> </tr> </tbody> </table> <button v-on:click="nameSearch()">查询</button><br><br> </div> 2.3 JS var goodsVue = new Vue({ el: '#app', data: { goodsList : '' }, methods: { nameSearch: function () { var _self = this $.ajax({ type: 'GET', url: '...', success:function(data) { _self.goodsList = data } }) } } })以上所述是小编给大家介绍的Vue.js Ajax动态参数与列表显示实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
