hellonewyear 2022-07-07 01:03 采纳率: 100%
浏览 359
已结题

VUE根据数据怎么循环生成N行N列表格

<template>
  <div>
    行列根据数据生成测试
    <tbody v-for="item in ceshi" :key="item">
      <tr>
        <td>
          <div>
            <span>{{ item }}</span>
          </div>
        </td>
      </tr>
    </tbody>
  </div>
</template>

<script setup>
const ceshi = [11, 22, 33, 44, 55, 66, 77, 88];
</script>

<style lang="scss" scoped>
</style>

这个数据要实现两行四列的效果,比如:

11 22 33 44
55 66 77 88

tr跟td这里的循环怎么写呢?

v-for 跟if 不能在一个标签里,怎么判断自动换行呢?

  • 写回答

2条回答 默认 最新

  • 天际的海浪 2022-07-07 01:45
    关注

    参考

    <!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>
    </style>
    </head>
    <body>
        <div id="app">
            <table>
                <tr v-for="row in ceshi">
                    <td v-for="itme in row">
                        {{itme}}
                    </td>
                </tr>
            </table>
        </div>
    
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                ceshi: [
                    [11, 22, 33, 44],
                    [55, 66, 77, 88]
                ]
            }
        });
    </script>
    </body>
    </html>
    
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 关注

    for循环写在tr和td上遍历

    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 7月15日
  • 已采纳回答 7月7日
  • 创建了问题 7月7日

悬赏问题

  • ¥30 宾馆客房管理系统可视化
  • ¥20 unity打光没有照亮物体
  • ¥25 powershell如何拷贝1周前的文件
  • ¥15 询问MYSQL查询SQLSERVER数据表并比较差异后,更新MYSQL的数据表
  • ¥15 关于#前端#的问题,请各位专家解答!
  • ¥15 最小生成树问题 Prim算法和Kruskal算法
  • ¥25 医院住院病人呼叫器设计
  • ¥15 不想和现在的团队合作了,怎么避免他们对程序动手脚
  • ¥20 C语言字符串不区分大小写字典排序相关问题
  • ¥15 关于#python#的问题:我希望通过逆向技术爬取1688搜索页下滑加载的数据