vue嵌套表单增加删除行效果代码-html代码-BFW代码库

vue嵌套表单增加删除行效果代码

代码语言：html

代码描述：vue嵌套表单增加删除行效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />


    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/elementui.css">
    <style>
        .form{
           margin: 10px;
          }
          .form-item{
              margin: 10px;
              clear: both;
              display: flex;
          }
          .school{
              margin-left: 37px;
          }
    </style>

</head>

<body>
    <div id="myVue">

        <div>
            <form class="form">

                <div class="form-item">
                    <label for="name" /> 姓名 <input id="name" v-model="formdata.name"></input>
                </div>
                <div  class="form-item">
                    <label for="age" /> 年级 <input id="age" v-model="formdata.age"></input>
                </div>
                <div  class="form-item">
                    <label for="" /> 教育 <button type="button" @click="add">+</button>

                    <div v-for="(school, index) in formdata.schools" :key="school" class="school">



                        <input v-model="school.name"></input>
                        <select v-model="school.year"><option value="1">1年</option> <option value="2">2年</option></select>
                    
                        <button type="button" @click="del(index)">×</but.........完整代码请登录后点击上方下载按钮下载查看