Cynciya_ 2022-04-20 23:19 采纳率: 80%
浏览 45
已结题

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

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

img


需完成：
总页数、每页记录数在组件的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>
  • 写回答

2条回答 默认 最新

  • CSDN专家-天际的海浪 2022-04-21 01:34
    关注

    你题目的解答代码如下：

    <!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>

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

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 5月9日
  • 已采纳回答 5月9日
  • 创建了问题 4月20日

悬赏问题

  • ¥15 oracle集群安装出bug
  • ¥15 关于#python#的问题：自动化测试
  • ¥20 问题请教！vue项目关于Nginx配置nonce安全策略的问题
  • ¥15 教务系统账号被盗号如何追溯设备
  • ¥20 delta降尺度方法，未来数据怎么降尺度
  • ¥15 c# 使用NPOI快速将datatable数据导入excel中指定sheet，要求快速高效
  • ¥15 再不同版本的系统上，TCP传输速度不一致
  • ¥15 高德地图点聚合中Marker的位置无法实时更新
  • ¥15 DIFY API Endpoint 问题。
  • ¥20 sub地址DHCP问题