网页前端开发设计如下组件Vue

设计分页组件，样式如下：

需完成：
总页数、每页记录数在组件的data数据中进行设置，计算总页数。之后在页面中显示出1开始的页码。(例如每页显示5条记录，共有55条记录，那么页面中应该显示1~11页码），点击页码，高亮显示。
样式已给出：


<style>

  #app{

    width: 500px;

    margin: 50px auto;

  }

  .pages{

    margin:0px;

    padding:0px;

    list-style:none;

    display:flex;

  }

  .pages li{

    width:30px;

    height:30px;

    line-height:30px;

    margin-left:5px;

    text-align:center;

    border:1px solid #DEE1E6;

    cursor:pointer;

  }

  .active{

    background-color:#DEE1E6;

  }

</style>

页面代码结构：


<body>

    <div id="app">

      <!-- 分页组件 -->

      <page-component :total="total"></page-component>

    </div>

    

    <script>

      //注册组件（请编写以下代码）

      

      

      var vm = new Vue({

        el:"#app",

        data:{

          total:55//总记录数

        }

      });

    </script>

    

  </body>

你题目的解答代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
  #app{
    width: 500px;
    margin: 50px auto;
  }
  .pages{
    margin:0px;
    padding:0px;
    list-style:none;
    display:flex;
  }
  .pages li{
    width:30px;
    height:30px;
    line-height:30px;
    margin-left:5px;
    text-align:center;
    border:1px solid #DEE1E6;
    cursor:pointer;
  }
  .active{
    background-color:#DEE1E6;
  }
</style>
</head>
<body>
    <div id="app">
      <!-- 分页组件 -->
      <page-component :total="total"></page-component>
    </div>
    <script>
    //注册组件（请编写以下代码）
    Vue.component('page-component', {
        props: ['total'],
        data: function () {
          return {
            active: 1
          }
        },
        template: `
          <ul class="pages">
              <li v-for="index of Math.ceil(total/5)" :class="{active: active==index}" @click="active=index">{{index}}</li>
          </ul>
        `
    });
      var vm = new Vue({
        el:"#app",
        data:{
          total:55//总记录数
        }
      });
    </script>
</body>
</html>

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632

网页前端开发 设计如下组件Vue

网页前端开发设计如下组件Vue