vue实现简单的表单添加、删除

最新推荐文章于 2024-08-08 22:30:15 发布

前方太黑暗

最新推荐文章于 2024-08-08 22:30:15 发布

阅读量2k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/xcc_2269861428/article/details/107575538

版权

vue 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

vue实现简单的表单添加、删除。没有涉及到后台传参，纯前端

表单样式：

代码：

<!DOCTYPE html>
<html>
<head>
  <title>vue练习</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <script>
  window.onload=function(){
    new Vue({
      el: '.container',
      data: {
        name:'',
        users: [],
        user:{}
      },
      methods: {
        addUser(){
          this.users.push(this.user);
          this.user={};
        },
        delUser(us_index){
          if(us_index == -1){
              this.users={};
          }else{
             this.users.splice(us_index,1);
          }        
        }
      }
    })
  }

</script>
</head>
<body>
<div class="container">
  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="name" class="col-sm-2 control-label">名字</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="name" v-model="user.name"
             placeholder="请输入名字">
      </div>
    </div>
    <div class="form-group">
      <label for="sex" class="col-sm-2 control-label">性别</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="sex" v-model="user.sex"
             placeholder="请输入名字">
      </div>
    </div>
    <div class="form-group">
      <label for="age" class="col-sm-2 control-label">年龄</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="age" v-model="user.age"
             placeholder="请输入名字">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <a v-on:click="addUser">添加</a>
      </div>
    </div>
  </form>
  <table class="table table-bordered">
    <caption>人员列表</caption>
    <thead>
      <tr>        
        <th>序号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(user,index) in users">
        <td>{{(index+1)}}</td>
        <td>{{user.name}}</td>
        <td>{{user.sex}}</td>
        <td>{{user.age}}</td>
        <td><a v-on:click="delUser(index)">删除</a></td>
      </tr>
      <tr><td colspan="5"><a v-on:click="delUser(-1)">删除全部</a></td></tr>
    </tbody>
  </table>
</div>

</body>
</html>