vue 动态生成input进行操作——简单实现添加删除联系人功能

最新推荐文章于 2024-08-04 12:47:40 发布

zuo-yiran

最新推荐文章于 2024-08-04 12:47:40 发布

阅读量9.7k

点赞数

分类专栏： vue学习笔记文章标签：动态增删 vue input操作

本文链接：https://blog.csdn.net/zuoyiran520081/article/details/80264646

版权

vue学习笔记专栏收录该内容

49 篇文章 6 订阅

订阅专栏

实现类似的如图功能：
这里写图片描述

代码如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>修改实现添加联系人操作</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <div v-for="(list,index) in lists">
                <ul>
                    <li>
                        <span>名字</span>
                        <input type="text" v-model="list.name" style="width:100px">
                    </li>
                    <li>
                        <span>电话</span>
                        <input type="text" v-model="list.tel" style="width:100px">
                    </li>
                    <li>
                        <button v-on:click="del(index)">删除联系人</button>
                    </li>
                </ul>
            </div>
            <button v-on:click="add">添加联系人</button>
        </div>

    </body>
    <script>
        var vm = new Vue({
            el : "#app",
            data:{
                tables : [],
                lists:[{
                    name:"wang",
                    tel:"qwe"
                }]
            },
            methods:{
                add:function(){
                    let cope = {
                        name:"",
                        tel:""
                    }
                    this.lists.push(cope);
                    console.log(this.lists)
                },
                del:function(index){
                    this.lists.splice(index,1);
                    console.log(this.lists)
                }
            }
        });
    </script>

</html>