欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Vue - 信息录入界面小练习

程序员文章站 2022-07-13 13:37:13
...
要实现图中的功能：
  1. 其中的数据是在代码中给出的
  2. 删除添加功能都可以使用
  3. 为填入信息会弹出提示框

Vue - 信息录入界面小练习
Vue - 信息录入界面小练习

Vue - 信息录入界面小练习

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

上一篇： 模板-warmup

下一篇： golang读取pdf

推荐阅读