VUE实现学生用户信息表

一、效果图如图二、代码如下Document

^395

2762人浏览 · 2022-03-15 22:31:05

^395 · 2022-03-15 22:31:05 发布

一、效果图如图
在这里插入图片描述

二、代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <span>班级:</span>
        <input type="number" v-model="student.grade"></br>
        <span>姓名:</span>
        <input type="text" v-model="student.name"></br>
        <span>性别:</span>
        <select v-model="student.gender">
            <option value="男">男</option>
            <option value="女">女</option>
        </select></br>
        <span>年龄:</span>
        <input type="number" v-model="student.age"></br>
        <button @click="add">添加学生</button>
        <table border="1" width="50%" style="border-collapse: collapse;">
            <tr>
                <th>序号</th>
                <th>班级</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <tr align="center" v-for="(item,index) in students">
                <td>{{index+1}}</td>
                <td>{{item.grade}}</td>
                <td>{{item.name}}</td>
                <td>{{item.gender}}</td>
                <td>{{item.age}}</td>
                <td>
                    <button @click="del(index)">删除</button>
                </td>
            </tr>
        </table>
    </div>
     <script>
        var vm=new Vue({
            el:'#app',
            data:{
                
                students:[
                    {
                    grade:'1',
                    name:'李四',
                    gender:'男',
                    age: 25
                    },
                    {
                    grade:'2',
                    name:'王五',
                    gender:'女',
                    age: 21
                    }
                ],
                student:{}
            },
            methods:{
                add(){
                    var p={
                      grade:this.student.grade,
                      name:this.student.name,
                      gender:this.student.gender,
                      age:this.student.age
                      
                    };
                    this.students.push(p)
                },
                del(index){
                    this.students.splice(index,1);
                }
            }
        })
    </script> 
</body>
</html>

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