vue实现动态增删表单项/表格项

风信子 2020-12-28 12:23:25 442℃

效果图预览

html完整代码

<!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>
标签: HTML, Vue

非特殊说明,本博所有文章均为博主原创。