vue中动态添加div

Posted 2021-02-04 shuaifing

知识点：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

以上是关于vue中动态添加div的主要内容，如果未能解决你的问题，请参考以下文章

vue如何动态添加多个li

vscode添加vue文件模板

vue点击动态删除div

vue-echarts /div动态的计算高度

循环遍历Vue.js中的动态数组，然后根据对应的值将每个对象组件添加到单独组件中的div中？

JS动态添加div