vue中动态添加div

时间:2022-09-27 06:54:55

知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可

效果

vue中动态添加div

核心代码说明(样式代码可自行修改,详细代码请参照源码)

<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--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--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--icon m-btn--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