小白第一次尝试使用vue制作分页功能,分为两个部分,一个是表格部分,一个是下面分页的按钮部分
表格部分用最熟悉的html标签table
<table>
<!--头部-->
<tr>
<th>字母</th>
</tr>
<!--数据展示部分-->
<tr >
<td></td>
<td>
<button type="button">修改</button>
<button type="button">删除</button>
</td>
</tr>
</table>
分页按钮部分用div标签嵌套ul 在li 里面放 a
<div id="page">
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
在加上一些css样式,让数据表格部分和分页按钮部分更加美观~这里就不放了!大家多动手自己写~
现在进入vue.js部分,稍微来复习一下vue的一些基础知识~~
首先,创建一个vue对象。
var list = Vue({
el:"#list",
data:{},//数据存放
computed:{},//属性计算
methods:{},//方法存放
mounted:{},//钩子函数,只执行一次,一般都是用来给数据初始化
......
})
在el上写上要进行操作的id名,data里面存放要显示在页面上的数据和变量。methods存放要使用的函数...
紧接着,我们尝试把数据在页面上显示,先在data里定义一个数组,来存放数据(一般数据都是从后端获取然后显示出来,这里我们先自己定义一个数组来代替一下数据展示~),在页面用v-for来显示数据
data:{
//数据显示
list