vue table v-for v-for其他用法

最新推荐文章于 2025-02-24 11:23:10 发布

spfLinux

最新推荐文章于 2025-02-24 11:23:10 发布

阅读量9.3k

点赞数 1

分类专栏： vue 文章标签： vue table v-for

vue 专栏收录该内容

35 篇文章

订阅专栏

本文通过两个实例展示了Vue.js中列表渲染的应用：一是利用v-for指令动态生成学生信息表格；二是创建包含数值列表的项目。这些示例有助于理解Vue.js如何高效地管理和更新DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
	<table>
		<thead>
			<tr>
				<td>性别</td>
				<td>年龄</td>
				<td>分数</td>
			</tr>
		</thead>
		<tbody id="tby">
			<tr v-for="(item,index) in stu">
				<td>{{item.sex}}</td>
				<td>{{item.age}}</td>
				<td>{{item.score}}</td>
			</tr>
			<!-- <tr>
				<td>{{stu[0].sex}}</td>
				<td>{{stu[0].age}}</td>
				<td>{{stu[0].score}}</td>
			</tr>
			<tr>
				<td>{{stu[1].sex}}</td>
				<td>{{stu[1].age}}</td>
				<td>{{stu[1].score}}</td>
			</tr>
			<tr>
				<td>{{stu[2].sex}}</td>
				<td>{{stu[2].age}}</td>
				<td>{{stu[2].score}}</td>
			</tr> -->
		</tbody>
	</table>

	<script type="text/javascript">
		new Vue({
			el:'#tby',
			data:{
				stu:[
						{sex:'男',age:20,score:88},
						{sex:'女',age:45,score:98},
						{sex:'男',age:20,score:66}
					]
			}
		});
	</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
	<div id="example">
		<ul v-for="tmp in list">
			<li>{{tmp}}</li>
		</ul>
		<!-- <ul v-for="(item,index) in list">
			<li>{{item}}</li>
		</ul> -->
	</div>

	<script type="text/javascript">
		new Vue({
			el:'#example',
			data:{
				list:[100,200,300]
			}
		})
	</script>
</body>
</html>