VUE生成动态表格

最新推荐文章于 2024-04-25 14:45:19 发布

平平无奇小码手

最新推荐文章于 2024-04-25 14:45:19 发布

阅读量361

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/qq_51173747/article/details/133792590

版权

<!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 scoped>
        table {
         border-collapse: collapse;
         width: 100%;
         margin-top: 20px;
         border-radius: 10px;
         overflow: hidden;
        }
        th {
         background-color: #076aac;
         color: #fff;
         font-weight: bold;
         padding: 8px;
         text-align: left;
         border: 1px solid #ffffff;
        }
        td {
         background-color: #f8f8f8;
         color: #333;
         padding: 8px;
         border: 1px solid #50a5f4;
        }
        .even-row {
        background-color: #fff;
        }
        .odd-row {
        background-color: #f2f2f2;
        }
        div {
         padding: 20px;
        }
        h1 {
         color: #ffffffbe;
         text-align: center;
         background: linear-gradient(200deg, #97b8ef, #07579c);
         border-radius: 10px;
         margin: 0 auto;
         max-width: 50%;
         padding: 10px;
        margin-bottom: 20px;
        }
   </style>
   <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>学生信息管理</h1> <button @click="getstudents">获取</button>
        <table v-if="dataFetched">
             <thead>
                  <tr>
                       <th>序号</th>
                       <th>姓名</th>
                       <th>学号</th>
                       <th>性别</th>
                       <th>年级</th>
                       <th>专业</th>
                       <th>住址</th>
                       <th>省份</th>
                       <th>电话</th>
                  </tr>
             </thead>
             <tbody>
                <tr v-for="student in students">
                    <td>{{student.stuid}}</td>
                    <td>{{student.stuname}}</td>
                    <td>{{student.stuno}}</td>
                    <td>{{student.stugender}}</td>
                    <td>{{student.stugrade}}</td>
                    <td>{{student.stumajor}}</td>
                    <td>{{student.stuaddress}}</td>
                    <td>{{student.stunative}}</td>
                    <td>{{student.stuphone}}</td>
                </tr>
             </tbody>
        </table>
        </div>        
</body>
<script>
new Vue({
  el: '#app',
  data: {
    dataFetched:false,
    students:[]
  },
  methods: {
    getstudents(){
        setTimeout(()=>{
            const data=[{stuid:1,stuname:"张张",stuphone:13555555555,stugender:"女",stugrade:2021,stumajor:"软件工程",stuaddress:"成都市新都区",stunative:"四川省",stuno:20213100000},
                {stuid:1,stuname:"李李",stuphone:13888888888,stugender:"男",stugrade:2021,stumajor:"网络空间安全",stuaddress:"成都市新都区",stunative:"四川省",stuno:2021311111},
                {stuid:1,stuname:"王王",stuphone:13777777777,stugender:"女",stugrade:2021,stumajor:"计算机科学与技术",stuaddress:"成都市新都区",stunative:"四川省",stuno:20213122222}];
            this.students=data;
            this.dataFetched=true;
        },1000);
    }
  },
})


</script>
</html>