Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。想了解更多,请戳
html代码:
- >
- 共{{all}}页
css部分,可根据自己的实际需要进行调整:
.page-bar ul li {
list-style: none;
border: 1px solid #ddd;
text-decoration: none;
position: relative;
float: left;
text-align: center;
padding: 1px 0;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
cursor: pointer;
width: 8%;
}
.page-bar li:first-child>a {
margin-left: 0px
}
.page-bar .active a {
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}
.page-bar i {
font-style: normal;
color: #d44950;
margin: 0px 4px;
font-size: 12px;
}
js部分:
首先要创建一个基本组件
继而要利用computed计算页码,
要给 元素加v-on:click="cur++"事件,所以要在vue里加method方法:
其实到这里基本上就差不多了,但是可以优化一下,当用户触发点击事件时,页面发生改变,这时要通知其他组件做出改变。
观察了cur数据当它改变的时候,可以获取前后值。然后通知其他组件。
后期会在个人GitHub上提交完整版代码
补充效果图展示