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

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>
    
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥15 双目摄像头标定后的校准文件
  • ¥15 从键盘输入不管多少字符或者数组 输出的时候先提示输出再显示结果 输出的时候字符间间隔一个空格符
  • ¥15 powerbi举证增加度量值后出现对应关系错乱
  • ¥30 频率分析法分析绘制奈奎斯特图、波特图
  • ¥15 弹出来一万个系统找不到指定的文件框框,怎么解决
  • ¥15 ADS生成的微带线为什么是蓝色空心的
  • ¥15 求一下解题思路,完全不懂
  • ¥15 tensorflow
  • ¥15 densenet网络结构中,特征以cat方式复用后是怎么进行误差回传的
  • ¥15 STM32G471芯片spi设置了8位,总是发送16位