该文章展示了如何使用Vue.js进行表格数据的动态渲染。通过分析示例，作者提到对于固定内容的表格头使用普通数组，而表格主体部分的数据则以对象形式存储在数组中，利用v-for指令遍历并显示。示例代码包括HTML结构、Vue实例及数据模型。
案例1 图书管理
这是效果图
首先我们要分析一下，我们到底v-for遍历的是数组形式，还是数组对向形式
首先是表格的第一行
我们会看到这些内容是固定不变的，而且更改的可能性比较小，考虑直接使用普通数组形式
下面的四行，我们可以看出他们是同一类型
所以把每一行看成是一个对象，这样我们就有四个对象了，把对象封装在数组里面
下面是整个的代码
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="./vue-2.6.12.js"></script>
</head>
<body>
<div id="app" class="container">
<table class="table table-bordered table-hover">
<tr class="danger">
<th v-for="(ele,index) in title" :key="index">{{ele}}</th>
</tr>
<tr v-for="(obj,index ) in books" :key="obj.id">
<td>{{index+1}}</td>
<td>{{obj.name}}</td>
<td>{{obj.date}}</td>
<td>
<a href="" @click.prevent>修改</a>|
<a href="" @click.prevent>删除</a>
</td>
</tr>
</table>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
title:["编号","名字","日期","操作"],
books:[
{id:1,name:"三国演义",date:"2022-1-1",},
{id:2,name:"红楼梦",date:"2022-1-1",},
{id:3,name:"水浒传",date:"2022-1-1",},
{id:4,name:"西游记",date:"2022-1-1",}
],
}
})
</script>
</body>
</html>
2206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
