使用v-for完成水果列表（二维数组）的渲染

代码如下：

vue

<template>
	<h1>水果列表</h1>
	<div>
		<table cellpadding="0" cellspacing="0" class="demo">
			<tr>
				<th>水果序号</th>
				<th>水果名称</th>
				<th>详细信息</th>
			</tr>
			<tr v-for="item in user" :key="item.id">
				<td>{{item.id}}</td>
				<td>{{item.name}}</td>
				<td>{{item.gender}}</td>
			</tr>
		</table>
	</div>

</template>

<script setup>
	import {
		reactive
	} from 'vue'
	const user = reactive([
		{
			id: 1,
			name: '芒果',
			gender: '芒果果肉细腻,晴天多汁,甜度极高。'
		},
		{
			id: 2,
			name: '柠檬',
			gender: '柠檬具有生津止渴，化痰止咳的功效。'
		},
		{
			id: 3,
			name: '香蕉',
			gender: '香蕉果肉香甜软滑，是人们喜爱的水果之一。'
		},
		{
			id: 4,
			name: '西瓜',
			gender: '西瓜汁水四溢，给人们清凉爽口的感觉。'
		}
	])
</script>

<style>
	.demo{
		border: 1px solid #ccc;
		text-align: center;
	}
	h1{
		color: red;
		font-size: 25px;
	}
	td{
		border: 1px solid #ccc;
	}
</style>

方法二：

<template>
	<h1>水果列表</h1>
  <div>
    <table padding="0" cellspacing="0" class="demo" 
	id='down' border="1px solid #ccc">
       <tr v-for='(item, index) in data'>
        <template v-for='items in item'>
         <template v-for='(itemss, indexs) in items'>
          <td>{{itemss}}</td>
         </template>
        </template>
       </tr>
	</table>
  </div>
</template>

<script>
   export default{
     name: "table",
     props: {
     	dataSource: []
     },
     data() {
     	return {
			data:[
				[{
					key1:"水果序号",
					key2:"水果名称",
					key3:"详细信息",
				}],
				[{
					key1:1,
					key2:"芒果",
					key3:"芒果果肉细腻,晴天多汁,甜度极高。",
				}],
				[{
					key1:2,
					key2:"柠檬",
					key3:"柠檬具有生津止渴，化痰止咳的功效。",
				}],
				[{
					key1:3,
					key2:"香蕉",
					key3:"香蕉果肉香甜软滑，是人们喜爱的水果之一。",
				}],
				[{
					key1:4,
					key2:"西瓜",
					key3:"西瓜汁水四溢，给人们清凉爽口的感觉。",
				}]
				]
      }
     },
     mounted() {
     }
   }
</script>

<style>
  .demo{
	  text-align: center;
  }
  h1{
	  color: red;
	  font-size: 25px;
  }
</style>

  main.js

import { createApp } from 'vue'
import App from './components/components.vue'

const app=createApp(App)
app.mount('#app')

 效果图如下：