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

性别年龄分数{{item.sex}}{{item.age}}{{item.score}}{{stu[0].sex}}{{stu[0].age}}{{stu[0].score}}{{stu[1].sex}}{{stu[1].age}}

spfLinux

9371人浏览 · 2018-01-10 10:55:43

spfLinux · 2018-01-10 10:55:43 发布

<!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>

Vue

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐