如何用vue展示二维数组
一.代码实现
我们可以用vue组库件element的el-row和el-col来实现。
<template>
<div>
<fieldset>
<legend>二维数组</legend>
<!-- 遍历一维数组的个数 -->
<el-row
:gutter="20"
v-for="(itemRow, indexRow) in dataArry"
:key="indexRow"
:label="itemRow"
>
<!-- 遍历每一个一维数组的元素个数 -->
<el-col
:span="4"
v-for="(itemCol, indexCol) in itemRow"
:key="indexCol"
:label="itemCol"
>{{ itemCol }}</el-col
>
</el-row>
</fieldset>
</div>
</template>
<script>
export default {
data() {
return {
dataArry: [
[1, 1, 0, 0, 1],
[0, 1, 0, 0, 1],
[0, 0, 1, 1, 1],
[0, 0, 1, 1, 1],
[0, 0, 0, 0, 1],
],
};
},
};
</script>
<style scoped>
fieldset {
/* 表单页面居中,宽度40% ,legend颜色设置,legend圆角*/
border: 2px solid #dcdfe6;
text-align: top;
border-radius: 8px;
margin: 0 auto;
width: 40%;
}
</style>