代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>列表渲染</title>
<script src="../file/vue.js"></script>
</head>
<body>
<!-- 列表渲染通过v-for实现 -->
<div id="test1">
<h1>数组渲染到列表</h1>
<!-- 通过数组的遍历进行渲染,其格式为：数组中每一个元素的名字 in 数组名，其中arrA为数组，e为数组中每一个元素的名字，搭配插值表达式进行渲染 -->
<ul>
<li v-for="e in arrA">{{e}}</li>
</ul>
</div>
<hr />
<div id="test2">
<h1>对象渲染到列表</h1>
<!-- 渲染对象到页面格式为：对象名 in 对象 ，会将对象的信息遍历展示 -->
<ul>
<li v-for="d in dog">{{d}}</li>
</ul>
</div>
<hr />
<div id="test3">
<h1>多个对象渲染到表格中</h1>
<!-- 将多个对象渲染到表格中，就是将多个相同对象放入集合中，通过遍历集合的方式将集合中的对象渲染到表格中 -->
<table border="1px" cellspacing="0px">
<tr>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr v-for="p in peopleList">
<td>{{p.id}}</td>
<td>{{p.name}}</td>
<td>{{p.sex==M?'男':'女'}}</td>
<td>{{p.age}}</td>
</tr>
</table>
</div>
<script>
//数组渲染到列表的Vue实例
new Vue({
el: "#test1",
data: {
arrA: ["语文", "数学", "英语"],
},
});
//对象渲染到列表的Vue实例
new Vue({
el: "#test2",
data: {
dog: {
name: "小花",
sex: "雄性",
age: "2岁",
},
},
});
//多个对象渲染到表格中
new Vue({
el: "#test3",
data: {
//这里没有和后端交互自己写点数据
peopleList: [
{
id: 1001,
name: "张三",
age: 20,
sex: "M",
},
{
id: 1002,
name: "李四",
age: 21,
sex: "F",
},
{
id: 1003,
name: "赵六",
age: 22,
sex: "M",
},
{
id: 1004,
name: "六七",
age: 23,
sex: "F",
},
],
},
});
</script>
</body>
</html>
效果图
