Vue - 信息录入界面小练习

作者: 一世长安乱 | 来源:发表于2018-04-19 14:54 被阅读0次

Vue - 信息录入界面小练习
2018-07-09
2018-12-03
登陆界面与录入
2018-12-02
2.7 商品信息录入界面功能设计
2.8商品信息录入界面功能设计
2.8商品信息录入界面功能设计
2018-05-25
商品信息录入界面功能设计

要实现图中的功能：

其中的数据是在代码中给出的
删除添加功能都可以使用
为填入信息会弹出提示框

效果图

空名字

空年龄

body中的代码

<body>
  <div id="app">
    <!--第一部分-->
    <fieldset>
      <legend>学生信息录入系统</legend>
      <div>
        <span>姓名：</span>
        <input type="text" placeholder="请输入姓名" v-model="newStudent.name">
      </div>
      <div>
        <span>性别：</span>
        <select v-model="newStudent.sex">
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <div>
        <span>年龄：</span>
        <input type="text" placeholder="请输入年龄" v-model="newStudent.age">
      </div>
      <div>
        <button @click="creatNewStudent()">添加新用户</button>
      </div>
    </fieldset>
    <!--第二部分-->
    <table>
      <thead>
      <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>删除</td>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(p, index) in persons">
        <td>{{p.name}}</td>
        <td>{{p.sex}}</td>
        <td>{{p.age}}</td>
        <td>
          <button @click="deleteStu(index)">删除</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <script src="vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        persons:[
          {name: '张三', sex: '女', age:'12'},
          {name: '李四', sex: '男', age:'16'},
          {name: '王五', sex: '女', age:'26'},
          {name: '赵六', sex: '男', age:'45'}
        ],
        newStudent: {name: '', sex: '男', age:'0'}
      },
      methods:{
        creatNewStudent(){
          if(this.newStudent.name === ''){
            alert('姓名不能为空');
            return;
          }
          if(this.newStudent.age <= 0){
            alert('请填写正确年龄');
            return;
          }
          this.persons.unshift(this.newStudent);
        },
        deleteStu(index){
          this.persons.splice(index,1);
        }
      }
    });
  </script>
</body>

style中的代码

<style>
    #app{
      margin: 50px auto;
      width: 600px;
    }
    fieldset{
      border: 1px solid orangered;
    }
    fieldset input{
      width: 200px;
      height: 30px;
      margin: 10px 0;
    }
    table{
      width: 600px;
      border: 2px solid orangered;
      text-align: center;
    }
    thead{
      background-color: orangered;
    }
</style>