Vuev-for的使用
Posted 栗栗本栗
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vuev-for的使用相关的知识，希望对你有一定的参考价值。
v-for用于遍历vue中的数据,可以遍历数组、对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 第二个的参数为键名-->
<p v-for="(value,key,index) in stu">{{index}} {{key}} {{value}}</p>
<hr>
<ul>
<li v-for="(item,index) in arr">{{index}} {{item}}</li>
</ul>
<hr>
<table>
<tr>
<th>数组下标</th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr v-for="(stu,index) in stuList" :key="stu.id">
<td>{{index}}</td>
<td>{{stu.id}}</td>
<td>{{stu.name}}</td>
<td>{{stu.age}}</td>
<td>{{stu.score}}</td>
</tr>
</table>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
arr: ["红色", "绿色", "蓝色"],
stu: {id: 1, name: "张三", age: 18, score: 90.6},
stuList: [
{id: 1, name: "张三", age: 18, score: 90.6},
{id: 2, name: "李四", age: 20, score: 88.3},
{id: 3, name: "王五", age: 19, score: 98.1},
]
}
});
</script>
以上是关于Vuev-for的使用的主要内容，如果未能解决你的问题，请参考以下文章