vue

vue-分页

新工作加班了好久终于放假了，接下来打算一点点的做点积累的事情，当前主要先把直接做过得东西分拆重新规划下，准备用vue来做spa，一步步来吧。
好久不更，自己这段时间辛苦了下，也算是完成了自己从php转为web前端的初步转变，由于自己在之前的广泛涉猎，给自己心的工作带来了很多帮助，下一步要努力做好web前端事情，做自己想做的web前端工程的事情。

vue分页

vue-dingyi-paging

代码

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="vue-dingyi-paging">
  <ul>
    <li>
      <a class="pageLink" href="#" @click="setPage(curNum-1)">
        <</a>
    </li>
    <li v-for="n in totalNum">
      <a class="pageLink" href="#" v-text="n+1" @click="setPage(n+1)" :class="{ curPage: n+1 == curNum }"></a>
    </li>
    <li><a class="pageLink" href="#" @click="setPage(curNum+1)">></a></li>
  </ul>
</div>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

new Vue({
  el: '#vue-dingyi-paging',
  data: {
    totalNum: 6, //总页数
    curNum: 1 //当前页码
  },
  methods: {
    //切换页码
    setPage: function(num) {
      //页码小于等于1
      if (num <= 1) {
        return this.curNum = 1;
      }
      //页码大于总页数
      if (num >= this.totalNum) {
        return this.curNum = this.totalNum;
      }
      //页码赋给当前页
      this.curNum = num;
    }
  }
})

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

* {
  margin: 0;
  padding: 0;
  font-size: 14px;
}

#vue-dingyi-paging ul {
  list-style: none;
  margin-top: 10px;
}

#vue-dingyi-paging ul li {
  margin: 0 5px;
}

#vue-dingyi-paging ul li,
.pageLink {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: #F0F0F0;
  color: #ABABAB;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
}

#vue-dingyi-paging ul li .pageLink:hover {
  background: #ABABAB;
  color: #FFFFFF;
}

#vue-dingyi-paging ul li .curPage {
  background: #81C06F;
  color: #FFFFFF;
}

后续慢慢改成实际使用中的组件