• 关于vue当中的增删改查


    注意当中v-model可以实现双向绑定,
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <style type="text/css">
    table thead tr th {
    text-align:center;
    }
    </style>
    </head>
    <body>
    <div style="padding:20px;" id="app">
    <div class="panel panel-primary">
    <div class="panel-heading">用户管理</div>
    <table class="table table-bordered table-striped text-center">
    <thead>
    <tr>
    <th>用户名</th>
    <th>年龄</th>
    <th>毕业学校</th>
    <th>备注</th>
    <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <template v-for="row in rows ">
    <tr><td>{{row.Name}}</td><td>{{row.Age}}</td><td>{{row.School}}</td><td>{{row.Remark}}</td>
    <td><a href="#" @click="Edit(row)">编辑</a>  <a href="#" @click="Delete(row.Id)">删除</a></td>
    </tr>
    </template>
    <tr>
    <td><input type="text" class="form-control" v-model="rowtemplate.Name" /></td>
    <td><input type="text" class="form-control" v-model="rowtemplate.Age" /></td>
    <td><select class="form-control" v-model="rowtemplate.School">
                     <option>中山小学</option>
                    <option>复兴中学</option>
                    <option>光明小学</option>
                    </select></td>
    <td><input type="text" class="form-control" v-model="rowtemplate.Remark" /></td>
    <td><button type="button" class="btn btn-primary" v-on:click="Save">保存</button></td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>
    <script src="Content/jquery-1.9.1.min.js"></script>
    <script src="Content/vue/dist/vue.js"></script>
    <script type="text/javascript">
    //Model
    var data = {
    rowtemplate: { Id: 0, Name: '', Age: '', School: '', Remark: '' }
    };
    //ViewModel
    var vue = new Vue({
    el: '#app',
    data: data,
    methods: {
    Save: function (event) {
    if (this.rowtemplate.Id == 0) {
    //设置当前新增行的Id

    if(!this.rows) this.rows=[],
    this.rowtemplate.Id = this.rows.length + 1;
    this.rows.push(this.rowtemplate);
    }

    //还原模板
    this.rowtemplate = { Id: 0, Name: '', Age: '', School: '', Remark: '' }
    },
    Delete: function (id) {
    //实际项目中参数操作肯定会涉及到id去后台删除,这里只是展示,先这么处理。
    for (var i=0;i<this.rows.length;i++){
    if (this.rows[i].Id == id) {
    this.rows.splice(i, 1);
    break;
    }
    }
    },
    Edit: function (row) {
    this.rowtemplate = row;
    }
    }
    });
    </script>
    </body>
    </html>

  • 相关阅读:
    mybatis:SQL拦截器
    eclipse:插件安装总结
    eclpse:安装explorer或eExplorer插件
    Spring Tools4
    nginx+tomcat:动静分离+https
    Tomcat:3DES解密时中文乱码
    wireshark如何抓取localhost包
    nginx: 应用访问默认采用https
    windows :config windows update … 一直处于假死状态
    EHCache:Eelment刷新后,timeToLiveSeconds失效了?
  • 原文地址:https://www.cnblogs.com/mmore123/p/12987402.html
Copyright © 2020-2023  润新知