<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 不能在一个标签里,怎么判断自动换行呢?
参考
<!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上遍历