- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>vue 动态加载表格数据及增删数据 </title>
- <link rel="stylesheet" href="bootstrap-3.3.7-dist/CSS/bootstrap.min.css">
- <style>
- #app{
- padding:50px;
- }
- .table{
- border:1px solid #bbb;
- margin-top:20px;
- }
- </style>
- </head>
- <body>
- <div id="app">
- <div class="container">
- <form class="form-inline">
- <div class="form-group">
- <label for="firstName">First Name</label>
- <input type="text" id="firstName" class="form-control" v-model="singleUser.firstName">
- </div>
- <div class="form-group">
- <label for="lastName">Last Name</label>
- <input type="text" id="lastName" class="form-control" v-model="singleUser.lastName">
- </div>
- <div class="form-group">
- <label for="userName">User Name</label>
- <input type="text" id="userName" class="form-control" v-model="singleUser.userName">
- </div>
- <button type="button" class="btn btn-default" @click="insert">Insert</button>
- </form>
- <table class="table">
- <thead>
- <tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>User Name</th>
- <th>Buttons</th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="(user,index) in users" :key="index">
- <td>{{index+1}}</td>
- <td>{{user.firstName}}</td>
- <td>{{user.lastName}}</td>
- <td>{{user.userName}}</td>
- <td><button @click="remove(index)">Remove</button></td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
- <script>
- // 注意: 只要 model(data) 中的对应数据发生改变, 页面自动刷新
- var app = new Vue({
- el:'#app',// 需要被 vue 模板化的 dom 结构
- data:{// 模型数据,{{}} 和 v-model 中的值都绑定了模型数据
- users:[
- {"firstName":"Jack","lastName":"lindo","userName":"lundo"},
- {"firstName":"Rose","lastName":"weiwei","userName":"cyyyy"},
- {"firstName":"Mark","lastName":"mark","userName":"mark"}
- ],
- singleUser:{"firstName":"","lastName":"","userName":""}
- },
- methods:{
- insert:function(){
- this.users.push(this.singleUser);
- },
- remove:function(index){
- this.users.splice(index, 1);
- }
- }
- });
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/36713/695e6a88fcc892b115ae32d3e58b34bb.html