验证中...
私信发送成功
vue分页.html
原始数据 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div class="myDiv">
<ul v-for='a in myData'>
<li>{{a.name}}</li>
<li>{{a.age}}</li>
<li>{{a.sex}}</li>
</ul>
<div>
<input type="button" name="" id="" value="上一页" @click='show'/>
<input type="button" name="" id="" value="下一页" @click='show1'/>
</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'.myDiv',
data:{
list:[{name:'zhangsan',age:15,sex:'nv'},
{name:'zhangsan1',age:16,sex:'nv1'},
{name:'zhangsan',age:17,sex:'nv'},
{name:'zhangsan',age:18,sex:'nv'},
{name:'zhangsan',age:19,sex:'nv'},
{name:'zhangsan',age:20,sex:'nv'},
{name:'zhangsan',age:21,sex:'nv'},
{name:'zhangsan',age:22,sex:'nv'},
{name:'zhangsan',age:23,sex:'nv'},
{name:'zhangsan1',age:24,sex:'nv1'},
{name:'zhangsan',age:25,sex:'nv'},
{name:'zhangsan',age:26,sex:'nv'},
{name:'zhangsan',age:27,sex:'nv'},
{name:'zhangsan',age:28,sex:'nv'},
{name:'zhangsan',age:29,sex:'nv'},
{name:'zhangsan',age:30,sex:'nv'},
{name:'zhangsan',age:15,sex:'nv'},
{name:'zhangsan1',age:16,sex:'nv1'},
{name:'zhangsan',age:17,sex:'nv'},
{name:'zhangsan',age:18,sex:'nv'},
{name:'zhangsan',age:19,sex:'nv'},
{name:'zhangsan',age:20,sex:'nv'},
{name:'zhangsan',age:21,sex:'nv'},
{name:'zhangsan',age:22,sex:'nv'},
{name:'zhangsan',age:23,sex:'nv'},
{name:'zhangsan1',age:24,sex:'nv1'},
{name:'zhangsan',age:25,sex:'nv'},
{name:'zhangsan',age:26,sex:'nv'},
{name:'zhangsan',age:27,sex:'nv'},
{name:'zhangsan',age:28,sex:'nv'},
{name:'zhangsan',age:29,sex:'nv'},
{name:'zhangsan',age:30,sex:'nv'}
],
myData:[], //用来接受数据
inow:1, //分页第几页
page:2 //每个页面有多少条内容
},
created:function () {
var cout = this.list.length;
for (var i=(this.inow-1)*this.page; i<this.page*this.inow;i++) {
this.myData.push(this.list[i]);
}
},
methods:{
show:function () {
var newData = []
var cout = this.list.length;
if (this.inow==1) {
return
}else{
this.inow--;
}
for (var i=(this.inow-1)*this.page; i<this.page*this.inow;i++) {
newData.push(this.list[i]);
this.myData = newData;
}
},
show1:function () {
var newData = [];
var cout = this.list.length;
var num = this.page;
if (this.inow==cout/num) {
return
}else{
this.inow++;
}
var cout = this.list.length;
for (var i=(this.inow-1)*this.page; i<this.page*this.inow;i++) {
newData.push(this.list[i]);
this.myData = newData;
}
}
}
})
</script>
</html>

评论列表( 0 )

你可以在登录后,对此项目发表评论