极客观点
项目管理
HarmonyOS
我学习 vue.js 并用 HTML 和 CSS 创建了一个基本表单：
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/pl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/ggg4zmxzjgz4i9b/style.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
</head>
<body>
<div id="app">
<div class="col-xs-5" id="mail_div">
<label for="mail">Mail:</label>
<input v-model="mail" placeholder="E-mail adress:" type="text" class="form-control" id="mail">
</div>
<div class="col-xs-5" id="date_div">
<label for="date">Date:</label>
<div class='input-group date' id='datetimepicker1'>
<input v-model="date" placeholder="Pick a date:" type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-5" id="adress_div">
<label for="adress">Adress:</label>
<input v-model="adress" placeholder="Adress of the point:"type='text' class="form-control" id="adress">
</div>
<div class="col-xs-5" id="company_div">
<label for="company">Company:</label>
<input v-model="company" placeholder="Company name:"type='text' class="form-control" id="company">
</div>
<div class="col-xs-5" id="fliers_div">
<label for="fliers">Number:</label>
<input v-model="fliers" placeholder="Write the number:" type='number' class="form-control" id="fliers">
</div>
<div id="table">
<table class="table">
<thead>
<th scope="col">Mail</th>
<th scope="col">Date</th>
<th scope="col">Adress</th>
<th scope="col">Company</th>
<th scope="col">Number</th>
</thead>
<tbody>
<tr>
<th scope="row">{{ mail }}</th>
<td>{{ date }}</td>
<td>{{ adress }}</td>
<td>{{ company }}</td>
<td>{{ fliers }}</td>
</tr>
</tbody>
</table>
</div>
<div id="button">
<div id="button_container_1">
<button type="button" class="btn btn-primary">Add a row</button>
</div>
<div id="button_container_2">
<button type="button" class="btn btn-success">Download</button>
</div>
</div>
</div>
<script src="https://dl.dropboxusercontent.com/s/3cml0fff7nbfpot/script.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({locale:'pl'});
});
</script>
</body>
这是我的 .js 文件，到目前为止它并没有做很多事情：
var app = new Vue({
el: '#app',
data: {
mail:'',
date:'',
adress:'',
company:'',
fliers:''
}
})
当我提交数据时，此代码会动态更新表格的行。我想要达到的效果应该让我在按下蓝色按钮后输入更多行的数据。如何使用 vue.js 做到这一点？我在 vue.js 中找到了一些关于动态表的教程，但我无法为我的案例找到易于掌握的解决方案。
原文由 Piotr Koller 发布，翻译遵循 CC BY-SA 4.0 许可协议
您应该进行以下更改：
在
data属性中声明一个数组（我们称之为rowData）在
methods:中声明一个方法（我们称之为addItem）在方法内部，从属性（邮件、日期、地址）填充一个 javascript 对象
将对象推送到 rowData 数组中并清除模型属性
每次将新对象推送到
rowData数组时，VueJs 都会自动检测并在表中呈现一个新行。