使用vue写出简单的学生管理系统

使用vue写出简单的学生管理系统_第1张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,tr,th,td{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <p>学号<input type="text" v-model="stu.no"></p>
            <p>姓名<input type="text" v-model="stu.uname"></p>
            <p>性别<input type="text" v-model="stu.usex"></p>
            <p>年龄<input type="text" v-model="stu.uage"></p>
           
        </div>
        <button @click="add">提交</button>
        <button @click="del1">取消</button>
       <table >
          <tr>
              <th>学号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>年龄</th>
          </tr>
          <tr v-for="(item,index) of items">
              <td>{{item.no}}</td>
              <td>{{item.uname}}</td>
              <td>{{item.usex}}</td>
              <td>{{item.uage}}</td>
              <td><button @click="del2(index)">删除</button></td>
          </tr>
       </table>
       <button @click="add">添加</button>
       <button @click="del(index)">删除</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script src="vue.js"></script> -->
    <script>
        new Vue({
            el:'#app',
            data:{
                isPart1: true,
                isPart1Ps: true,
                isPart2: true,
                mask21: false,
              items:[
                  {no:'1',uname:'小刚',usex:'男',uage:'18'},
                  {no:'2',uname:'小红',usex:'女',uage:'17'},
                  {no:'3',uname:'小明',usex:'男',uage:'19'},
                  {no:'4',uname:'小志',usex:'男',uage:'18'},
              ],
              stu:{no:'',uname:'',usex:'',uage:''}
            },
            methods:{
                add(){
                    this.items.push(this.stu)
                    this.stu = {}
                    console.log(this.stu)
                },
                del(){
                    this.items.pop()
                },
                del1(){
                    this.stu = {}
                },
                del2(index){
                    this.items.splice(index,1)
                },
                edit2(index) {
                    this.stu = {...this.items[index]};
                    this.mask21 = true;
                    this.modefyIndex = index;
                },
            }
        })
    </script>
</body>
</html>

你可能感兴趣的:(vue,javascript)