Vue的基础应用
我们用所学的基础知识做一个实例，实现一个简单的todolist，
主要功能：
1. 实现分页显示数据
2. 在todolist结构中，既可以添加一个新项目，实现分页查看
3. 能够实现查看上一页和下一页，
4. 又可以删除项目和修改项目（未完成）
<body>
<div id="app">
<div>
todo-list
<div>
添加新项目：<input type="text" @keyup.enter="addItem" v-model="item.name" />
</div>
<div>
<ul>
<li v-for="(item,index) in pageItems" v-if="item.status==1" @dblclick="cancelItem(item)">
{{item.name}}
</li>
</ul>
</div>
<div>
<ul>
<li><a href="#" @click.prevent="lastpage">上一页</a></li>
<li v-for="p in pagecount">
<a href="#" @click.prevent="jumpToPage(p)">{{p}}</a>
</li>
<li><a href="#" @click.prevent="nextpage">下一页</a></li>
</ul>
</div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var data = {
items: [
{name: 'item1', status: 1},
{name: 'item2', status: 1},
{name: 'item3', status: 1},
{name: 'item4', status: 1},
{name: 'item5', status: 1},
{name: 'item6', status: 1},
{name: 'item7', status: 1},
{name: 'item8', status: 1}
],
// 用来存放要添加的数据
item: {
name: '',
status: 1
},
pagesize: 5, // 每页的条数
page: 1 // 当前页
};
var vm = new Vue({
el: '#app',
data: data,
computed: {
// 当前页记录
pageItems() {
// offset 记录每一页数据是从items数组中哪条数据开始计数为一页的
var offset = (this.page - 1)*this.pagesize;
/*
slice() 方法返回一个新的数组对象，
这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。
原始数组不会被改变。
*/
return this.items.slice(offset,offset+this.pagesize);
},
// 总页数
pagecount() {
return Math.ceil(this.items.length/this.pagesize);
}
},
methods: {
// 上一页
lastpage() {
if (this.page > 1) {
this.page--;
}
},
// 当前页
jumpToPage(p) {
this.page = p;
},
// 下一页
nextpage() {
if (this.page < this.pagecount) {
this.page++;
}
},
// 添加数据
addItem() {
this.items.push({name: this.item.name, status: 1});
this.item.name = '';
},
// 删除数据
cancelItem(item) {
// 当item的status属性的值为2时，不在页面显示
item.status = 2;
}
}
});
</script>
页面显示：
4466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
