需求
在前端开发中，对于列表的操作是最常见的，例如：增加列表数据、删除列表数据、查询列表的关键字等等。
本篇章主要构建页面内容，以及「增加列表数据」。
构建列表示例页面
使用Bootstrap 4简单写一个列表以及相关查询条件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1.导入vue.js库 -->
<script src="lib/vue.js"></script>
<!-- 2.导入bootstrap库 -->
<link rel="stylesheet" type="text/css" href="lib/bootstrap4/bootstrap.min.css">
<script type="text/javascript" src="lib/bootstrap4/popper.min.js"></script>
<script type="text/javascript" src="lib/bootstrap4/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div class="container">
<!-- 搜素条件 start -->
<div class="row mt-2">
<!-- 输入查询条件id -->
<div class="form-group row">
<label for="input_id" class="col-sm-2 col-form-label">ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="input_id" placeholder="ID">
</div>
</div>
<!-- 输入查询条件id -->
<div class="form-group row ml-3">
<label for="input_name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="input_name" placeholder="Name">
</div>
</div>
<!-- 查询按钮 -->
<input type="button" value="查询" class="btn btn-primary ml-2 mb-3">
<!-- 搜素关键字 -->
<input type="text" class="form-control" id="input_keywords" placeholder="输入关键字">
</div>
<!-- 搜素条件 end -->
<!-- table列表 start-->
<div class="row">
<table class="table">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Ctime</th>
<th scope="col">Operation</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>奔驰</td>
<td>2020-01-17 12:21:31</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>宝马</td>
<td>2020-01-16 12:21:31</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<th scope="row">1</th>
<td>丰田</td>
<td>2020-01-17 10:21:31</td>
<td><a href="#">删除</a></td>
</tr>
</tbody>
</table>
</div>
<!-- table列表 end-->
</div>
</div>
<script>
// 2. 创建一个Vue的实例
var vm = new Vue({
el: '#app',
data: {
},
methods:{}
})
</script>
</body>
</html>
浏览器显示如下：
使用 v-for 渲染列表数据
将列表中的数据写成一个list数组，然后使用 v-for 进行遍历。
定义数据list数组，下面使用 v-for 进行数据遍历，如下：
渲染数据后的页面如下：
好了，基本的列表页面已经构建好了。那么下面来实现增加数据的示例。
增加列表数据
使用 「v-model」 绑定 「id」、「name」的数据，并且设置一个「click」的绑定事件，将数据增加到「list」数组中。
浏览器执行效果如下：
添加数据 ID：4, Name: 千里马 的数据，并点击添加按钮，触发添加数据。
完整实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1.导入vue.js库 -->
<script src="lib/vue.js"></script>
<!-- 2.导入bootstrap库 -->
<link rel="stylesheet" type="text/css" href="lib/bootstrap4/bootstrap.min.css">
<script type="text/javascript" src="lib/bootstrap4/popper.min.js"></script>
<script type="text/javascript" src="lib/bootstrap4/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div class="container">
<!-- 搜素条件 start -->
<div class="row mt-2">
<!-- 输入添加数据的id -->
<div class="form-group row">
<label for="input_id" class="col-sm-2 col-form-label">ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="input_id" placeholder="ID" v-model="id">
</div>
</div>
<!-- 输入添加数据的name -->
<div class="form-group row ml-3">
<label for="input_name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="input_name" placeholder="Name" v-model="name">
</div>
</div>
<!-- 添加按钮 -->
<input type="button" value="添加" class="btn btn-primary ml-2 mb-3" @click="add">
<!-- 搜素关键字 -->
<input type="text" class="form-control" id="input_keywords" placeholder="输入关键字">
</div>
<!-- 搜素条件 end -->
<!-- table列表 start-->
<div class="row">
<table class="table">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Ctime</th>
<th scope="col">Operation</th>
</tr>
</thead>
<tbody>
<!-- 使用v-for遍历数据，并且设置key保证组件唯一性 -->
<tr v-for="item in list" :key="item.id">
<th scope="row">{{ item.id }}</th>
<td>{{ item.name }}</td>
<td>{{ item.ctime }}</td>
<td><a href="#">删除</a></td>
</tr>
</tbody>
</table>
</div>
<!-- table列表 end-->
</div>
</div>
<script>
// 2. 创建一个Vue的实例
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
// 设置列表的数据 list
list: [
{ id: 1, name: '奔驰', ctime: new Date() },
{ id: 2, name: '宝马', ctime: new Date() },
{ id: 3, name: '丰田', ctime: new Date() },
],
},
methods:{
add(){
// 将数据加入list数组
this.list.push({ id: this.id, name: this.name, ctime: new Date() });
}
}
})
</script>
</body>
</html>
交流QQ群：
点击下面，查看更多Vue系列文章
