<div id="app">
<input type="text" @keyup.enter="add" v-model="input_value" placeholder="请输入">
<ul>
<li v-for="(item,index) in new_data">
<span>{{ item }}<span @click="remove(index + (page - 1) * tiaomu)" style="font-size: 25px">×</span></span>
</li>
</ul>
<span>一共有{{ data_list.length }}条</span>
<br/>
<div v-show="data_list.length>this.tiaomu">
<button @click="up" :disabled="page===1">上一页</button>
<span>当前第:{{ page }}页</span>
<button @click="next" :disabled="page>=data_list.length/this.tiaomu">下一页</button>
</div>
<br />
<button @click="clear_data">clear</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
data_list: [],
input_value: null,
page: 1,
tiaomu: 3, // 一页显示多少条
},
methods: {
// 添加元素
add: function () {
if (this.input_value == null) {
return;
}
this.data_list.push(this.input_value);
this.input_value = null;
},
// 移除数组中指定index的元素。
remove: function (index) {
// 如果删除的元素是当前页的最后一个,则页数减一。
if (this.page > 1 && Number.isInteger((this.data_list.length-1) / this.tiaomu) && index === this.data_list.length - 1) {
this.page--;
}
this.data_list.splice(index, 1);
},
// 下一页
next: function () {
this.page++;
},
// 上一页
up: function () {
this.page--;
},
// 清除数组
clear_data: function () {
this.data_list = [];
this.page = 1;
}
},
// 属性计算
computed: {
// 返回分页后的数组
new_data: function () {
return this.data_list.slice((this.page-1) * this.tiaomu, this.page * this.tiaomu);
}
}
})
</script>