vue简单实现分页器(父子组件传参,过滤器)

@app.vue

<template>
  <div v-if="data">
    
    <my-news :p="now" />

    <div class="pages">
      <span
        v-for="p in data.pageCount"
        :key="p"
        @click="now = p"
        :class="{ active: p == now }"
      >
        {{ p }}
      span>
    div>
  div>
template>

<script>
import MyNews from './components/MyNews.vue'
// https://web.web.codeboy.com/mfresh/data/news_select.php
export default {
  components: { MyNews },
  data() {
    return {
      data: null,
      now: 1, //默认值1 代表第一页
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const url =
        'https://web.codeboy.com/mfresh/data/news_select.php'

      this.axios.get(url).then(res => {
        console.log(res)
        this.data = res.data
      })
    },
  },
}
script>

<style lang="scss" scoped>
.pages {
  user-select: none;
  background-color: #eee;
  padding: 10px;
  display: flex;

  span {
    margin: 6px;
    border: 1px solid #777;
    color: #777;
    width: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 4px;

    &.active {
      color: white;
      background-color: orange;
      border-color: orange;
    }
  }
}
style>

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

@component/MyNews

<template>
  <div class="my-news" v-if="data">
    
    <div v-for="x in data.data" :key="x.nid">
      <span>{{ x.title }}span>
      {}}中的值 -->
      { 值 | 过滤器名  }} -->
      <span>{{ x.pubTime | date }}span>
    div>
    <p>p: {{ p }}p>
  div>
template>

<script>
//https://web.codeboy.com/mfresh/data/news_select.php?pageNum=1

// 传参做法: 先生成参数 然后 再传递
export default {
  props: ['p'], // 专门保存自定义参数/属性

  // 新的配置项 filters
  filters: {
    // 过滤器的格式  {{值|过滤器}}
    // 例如 {{ 值 | date }}
    date(value) {
      // 参数1: |前面的值
      // 返回值就是过滤后的结果
      // 由于服务器返回的时间戳是字符串类型, 需要 *1 转数字
      var d = new Date(value * 1) //Date会识别参数类型, 数字才是时间戳
      var year = d.getFullYear()
      var month = d.getMonth() + 1
      // 小于10 补0     真 && 执行此处代码
      month < 10 && (month = '0' + month)

      var day = d.getDate()
      if (day < 10) day = '0' + day

      return `${year}/${month}/${day}`
    },
  },

  data() {
    return {
      data: null,
    }
  },
  mounted() {
    this.getData()
  },
  // 监听器:
  watch: {
    // p(){}
    // 变化后, 重新发请求, 不关心值是什么, 所以不需要写形参
    p: function () {
      this.getData()
    },
  },

  methods: {
    getData() {
      const url = `https://web.codeboy.com/mfresh/data/news_select.php?pageNum=${this.p}`

      this.axios.get(url).then(res => {
        console.log(res)
        this.data = res.data
      })
    },
  },
}
script>

<style lang="scss" scoped>
.my-news {
  width: 800px;

  div {
    display: flex;
    padding: 10px;
    border-bottom: 1px dashed gray;
    justify-content: space-between;
  }
}
style>

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84