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

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 孟德尔随机化结果不一致
  • ¥20 求用stm32f103c6t6在lcd1206上显示Door is open和password:
  • ¥15 apm2.8飞控罗盘bad health,加速度计校准失败
  • ¥15 求解O-S方程的特征值问题给出边界层布拉休斯平行流的中性曲线
  • ¥15 谁有desed数据集呀
  • ¥20 手写数字识别运行c仿真时,程序报错错误代码sim211-100
  • ¥15 关于#hadoop#的问题
  • ¥15 (标签-Python|关键词-socket)
  • ¥15 keil里为什么main.c定义的函数在it.c调用不了
  • ¥50 切换TabTip键盘的输入法