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--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

原文地址：https://www.cnblogs.com/shuaifing/p/10292737.html