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

实现类似的如图功能:
vue 动态生成input进行操作——简单实现添加删除联系人功能_第1张图片

代码如下:


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

你可能感兴趣的:(vue学习笔记,动态增删,vue,input操作)