循环添加列表项的写法

最新推荐文章于 2024-08-19 03:24:35 发布

weixin_53545517

最新推荐文章于 2024-08-19 03:24:35 发布

阅读量210

点赞数

文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_53545517/article/details/116108384

版权

本文介绍了一种在Vue应用中实现点击按钮动态添加联系人输入框的方法，每个输入框的数据独立存储。通过声明一个对象数组，每次点击添加按钮时向数组中推入新的对象实例，每个对象对应一组输入框。利用v-model与数组中的对象属性绑定，确保了各组输入互不影响。示例代码展示了数据结构和添加功能的实现。

摘要由CSDN通过智能技术生成

举例:
在这里插入图片描述
点击添加按钮：增加一排联系输入框，并且每组的输入框不会相互影响，
实现思路：
声明一个对象数组，每一行的输入内容为一个对象，点击添加的时候往数组里面添加一个对象，
输入框的v-model变量的绑定，采用循环数组绑定到单个的对象上，实现互不影响
代码：
body：

<el-button size=“mini” type=“text” style=“margin-top: 5px” @click=“addLinkuser”>添加

            data里面
            // 联系人列表
        contactWay: [{  
            linkman: '',
            telNum: '',
            vxNum: ''
        }],
            
            methods里面
            addLinkuser (){
        this.contactWay.push({
            linkman: '',
            telNum: '',
            vxNum: '',
        })
    },