效果图预览
html完整代码
<![CDATA[<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue动态增删表单项</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<style>
#app{
padding: 15px 30px;
}
.form-inline .form-group{
display: block;
margin-bottom: 15px;
}
.form-inline .form-control{
margin-right: 5px;
}
</style>
</head>
<body>
<div id="app">
<form class="form-inline">
<div class="form-group"><h3>用户数据管理</h3></div>
<div class="form-group" v-for="(item, index) in form" :key="index">
<label>名字</label>
<input type="text" class="form-control" v-model="item.name">
<label>年龄</label>
<input type="text" class="form-control" v-model="item.age">
<label>邮箱</label>
<input type="email" class="form-control" v-model="item.email">
<button type="button" class="btn btn-danger" @click="delete_line(index)">
<span class="glyphicon glyphicon-minus" style="margin-right: 5px;"></span>删除
</button>
</div>
</form>
<div style="form-group">
<button type="button" class="btn btn-primary" @click="insert_line">
<span class="glyphicon glyphicon-plus" style="margin-right: 5px;"></span>新增一行
</button>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
form: [
{name: '李四', email: 'mail@qq.com', age: '99'},
{name: '', email: '', age: ''}
]
},
methods: {
//新增行
insert_line: function() {
this.form.push({name: '', email: '', age: ''});
},
//删除行
delete_line: function(idx){
this.form.splice(idx, 1);
}
}
})
</script>
</body>
</html>]]>
