要实现图中的功能：
  1. 其中的数据是在代码中给出的
  2. 删除添加功能都可以使用
  3. 为填入信息会弹出提示框

效果图
空名字

空年龄

  • 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>
Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue