使用vue寫出簡單的學生管理系統

在這裡插入圖片描述

<!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寫出簡單的學生管理系統

使用vue寫出簡單的學生管理系統

基於Python實現簡單學生管理系統

使用ArrayList的簡單學生管理系統

Vue+Bootstrap實現簡易學生管理系統

jdbc簡單學生管理系統

單鏈表完成簡單的學生管理系統

JDBC-簡單的學生管理系統-增刪改查

[17] MySQL資料庫--學生管理系統資料庫手寫SQL實現

新手小白簡單的學生管理系統

C語言寫的學生管理系統

基於java寫的學生管理系統

關於學生管理系統的簡單搭建

vue實現學生管理系統

C語言實現簡單航班管理系統

C語言實現簡單停車場管理系統

java實現簡單銀行管理系統

C#實現簡單成績管理系統的完整步驟

Python基於mysql實現學生管理系統

python建立學生管理系統

python實現簡單圖書管理系統

使用vue寫出簡單的學生管理系統

相關推薦