Vue小案例学生系统

最新推荐文章于 2024-07-02 17:52:16 发布

jifubu6013

最新推荐文章于 2024-07-02 17:52:16 发布

阅读量429

点赞数

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #upblock{
            width: 600px;
        
            margin: 0 auto;
        }
        #upblock input,#upblock select{
            margin: 10px;

        }
        .downblock{
               width: 598px;
            border: 1px solid #DDDDDD;;
            margin: 10px auto;
            text-align: center;
        }
      
        .th{
            background-color:  #DDDDDD;;
        }
        fieldset{border: 1px solid  #DDDDDD;;}
    </style>
</head>
<body>
    <!-- 上部分 --><div id="app">
    <div id="upblock">
        <fieldset>
            <legend>学生系统</legend>
            姓名：<input type="text" placeholder="请输入姓名" name="" v-model="newinfomation.name"  v-on:keyup.enter="addstudent"><br>
            性别：<select v-model="newinfomation.gender" >
                <option value="男">男</option>
                <option value="女">女</option>
            </select><br>
            年龄：<input type="number" placeholder="请输入年龄" name="" v-model="newinfomation.age"  v-on:keyup.enter="addstudent"><br>
            手机：<input type="number" placeholder="请输入手机" name="" v-model="newinfomation.phone"  v-on:keyup.enter="addstudent"><br>
            <button v-on:click="addstudent">创建新用户</button>
        </fieldset>
    </div>
    <!-- 下部分 -->
    
        <table class="downblock">
            <thead class="th">
                <tr>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>手机</td>
                    <td>删除</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(Student,index) in Students">
                    <td>{{Student.name}}</td>
                    <td>{{Student.gender}}</td>
                    <td>{{Student.age}}</td>
                    <td>{{Student.phone}}</td>
                    <td><button v-on:click="removeone(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
    var app=new Vue({
        el:"#app",
        data:{
            Students:[{name:"张三",gender:"男",age:18,phone:12352637286},
            {name:"李四",gender:"女",age:19,phone:13572637286},
            {name:"王五",gender:"男",age:12,phone:171237286},
            {name:"赵柳",gender:"女",age:14,phone:14612637286},
            {name:"嘟嘟",gender:"男",age:3,phone:115637286}],

            newinfomation:{name:"",gender:"男",age:0,phone:""}
        },
        methods:{
            addstudent:function(){
                if(this.newinfomation.name===""){
                    alert("请输入姓名！");
                    return;
                }   
                if(this.newinfomation.age<=0||this.newinfomation.age>=200){
                    alert("请输入正确的年龄！");
                    return;
                }
                if(this.newinfomation.phone.length<=0){
                    alert("请输入正确的手机号！");
                    return;
                }
             this.Students.unshift(this.newinfomation);
             this.newinfomation={name:"",gender:"男",age:0,phone:""};
            },
            removeone:function(index){
                this.Students.splice(index,1);

            }
        }

    })
</script>
</body>
</html>

jifubu6013

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue小案例学生系统

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #upblock{ width: 600px; margin: 0 auto;
复制链接

扫一扫