vue中動態添加div

知識點：vue中動態添加div節點，點擊添加，動態生成div,點擊刪除，刪除對應的div，其中數組的長度是動態改變的，如在from表單中應用，直接在提交方法中，獲得list,獲取所填的元素即可

效果：

核心代碼說明(樣式代碼可自行修改，詳細代碼請參照源碼)：

<div v-for="(v,i) in list">
 <div class="form-group m-form__group row" style="padding-top: 15px;padding-bottom: 15px;">
 <label class="col-form-label col-lg-2 col-sm-12">聯系人類型 <span
 style="color: #F00">*</span>
 </label>
 <div class="col-lg-3">
 <select class="form-control m-input&#45;&#45;fixed"
 v-model="list[i].contactType">
 <option v-for="option in contacttype_arr"
 v-bind:value="option.id">{{ option.typename}}
 </option>
 </select>
 </div >
 <label class="col-form-label col-lg-2 col-sm-12"> 數量<span
 style="color: #F00">*</span></label>
 <div class="col-lg-3">
 <input type="text" v-model="list[i].number"
 class="form-control m-input&#45;&#45;fixed"
 placeholder=""/>
 </div>
 <div class="col-lg-2">
 <div data-repeater-delete="" v-on:click="deleteNode(i)" style="margin-left: 35px;"
 class="btn-sm btn btn-danger m-btn m-btn&#45;&#45;icon m-btn&#45;&#45;pill">
 <span>
 <span> 刪除 </span>
 </span>
 </div>
 </div>
 </div>
</div>

<div class="m-form__group form-group row">
 <label class="col-lg-4 col-form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
 <div class="col-lg-4" v-on:click="addNode()">
 <div data-repeater-create="" style="text-align: center"
 class="btn btn btn-sm btn-brand m-btn m-btn--icon m-btn--pill m-btn--wide">
 <span>
 <span> 添加 </span>
 </span>
 </div>
 </div>
</div>

<script>
 new Vue({
 el: '#app',
 data: {
 contacttype_arr:[
 {id: 1, typename: '家人'},
 {id: 2, typename: '朋友'},
 {id: 3, typename: '同事'}
 ],
 //聯系人類型數組
 list:[
 {contactType: '', number: ''}
 ],
 },
 //初始化方法
 mounted:function () {

 },
 methods: {

 //添加標本div
 addNode:function() {
 this.list.push({contactType: '', number: ''});
 },
 //刪除樣本div
 deleteNode:function(i) {
 this.list.splice(i,1); //刪除index為i,位置的數組元素
 }
 }
 })
</script>

源碼鏈接：https://github.com/shuaishuaihand/vuedynamicdivdemo.git