7-表格显示案例

来源：互联网发布：windows ce应用小游戏编辑：程序博客网时间：2024/06/16 12:59

下面是一个综合的案例，每秒钟往表格中添加一条数据。本案例综合使用了v-if 和 v-for循环综合案例。

<!DOCTYPE html> <html lang="en"><head>  <meta charset="UTF-8">  <title>Vue入门之动态显示表格</title>  <script src="https://unpkg.com/vue/dist/vue.js"></script></head><body>  <div id="app">    <table>      <thead>        <tr>          <th>姓名</th>          <th>年龄</th>          <th>地址</th>        </tr>      </thead>      <!-- 如果列表有数据，直接输出表格数据，没有数据提示用户没有数据 -->      <tbody v-if="UserList.length > 0">         <tr v-for="item in UserList" >          <td>{{ item.name }}</td>          <td>{{ item.age }}</td>          <td>{{ item.address }}</td>        </tr>      </tbody>      <tbody v-else>        <tr><td colspan="3">没有数据奥！</td></tr>      </tbody>    </table>  </div>  <script>    var app = new Vue({               el: '#app',                     data: {                          UserList: []      }    });    // 每秒钟插入一条数据。    setInterval(function () {      app.UserList.push({'name': 'malun', 'age': 18, 'address': '北京黑地下室'});    }, 1000);  </script></body></html>

阅读全文

0 0