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

实现类似的如图功能：代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>修改实现添加联系人操作</title><script s

zuo-yiran

9729人浏览 · 2018-05-10 11:04:23

zuo-yiran · 2018-05-10 11:04:23 发布

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

代码如下：

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^