Skip to content

Instantly share code, notes, and snippets.

@curder

curder/dynamic-forms.html

Last active September 25, 2017 03:11
Show Gist options
  • Save curder/666cf90e1616d900b3f123e9350e20b2 to your computer and use it in GitHub Desktop.
Save curder/666cf90e1616d900b3f123e9350e20b2 to your computer and use it in GitHub Desktop.
Download ZIP
使用VueJs2.4.2动态添加表单Demo.
Raw
dynamic-forms.html
<!DOCTYPE html>
<html lang="zh_CN">
<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>Dynamic Forms</title>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<button class="btn btn-success mt-5 mb-5" @click="addNewElementForm">New Element</button>
<div class="card mb-3"
v-for="(element, index) in elements">
<div class="card-body">
<span class="float-right" style="cursor: pointer;" @click="destroyCurrentElementForm(index)">x</span>
<h4 class="card-title">Add Element(index: {{ index }} )</h4>
<div class="element-form">
<input v-model="element.name" type="text" class="form-control mb-2" placeholder="Name">
<input v-model="element.email" type="text" class="form-control mb-2" placeholder="Email">
<textarea v-model="element.description" class="form-control" placeholder="Description"></textarea>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script>
var app = new Vue({
el: ".container",
data: {
elements: [
{
name: '',
email: '',
description: ''
}
]
},
methods: {
/**
* 新增表单数据
*/
addNewElementForm () {
this.elements.push({
name: '',
email: '',
description: ''
});
},
/**
* 删除用户点击的表单数据
* @param integer index 表单index
*/
destroyCurrentElementForm(index) {
this.elements.splice(index, 1);
}
}
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment