vue水果栏

最新推荐文章于 2024-09-15 17:15:28 发布

无畏-小丑

最新推荐文章于 2024-09-15 17:15:28 发布

阅读量106

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_74829849/article/details/140138510

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.global.js"></script>
		<style>
			.box {
				width: 500px;
				text-align: center;
				border: 2px solid greenyellow;
			}
		</style>
	</head>
	<body>
		<div id="app2">
			<div>
				<table class="box" border="2">
					  <thead>
						<tr>
							<th>编号</th>
							<th>水果名</th>
							<th>详情</th>

						</tr>
					</thead>

					 
						 <tr v-for="item in arr01">
							 <td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.xq}}</td>
						</tr>
					
				</table>
			</div>
		</div>

		<script>
			// 列表渲染指令
			const App2 = Vue.createApp({
				data() {
					return {

						arr01: [{
								id: "001",
								name: "水蜜桃",
								xq:"非常甜",
							},
							{
								id: "002",
								name: "蓝莓",
								xq:"非常贵",
							},
							{
								id: "003",
								name: "香蕉",
								xq:"不喜欢",
							}
						]
					}
				}
			})
			App2.mount("#app2")
		</script>
	</body>
</html>