<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VueJs学习测试</title> <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="./node_modules/element-ui/lib/theme-default/index.css" /> <style> .mask { position: absolute; display: none; top: 0px; left: 0px; margin: 0px; width: 100%; height: 100%; background-color: #000; opacity: 0.5; } </style> </head> <body> <div id="app" class="container" style="margin-top: 20px;"> <div class="row"> <form style=" 320px;" onsubmit="return false;" @submit="form_submit()"> <div class="form-group"> <label>姓名</label> <input type="text" class="form-control" v-model="current_user.name" :disabled.prop="status == 'show' ? true : false" required /> </div> <div class="form-group"> <label>性别</label> <select class="form-control" v-model="current_user.sex" :disabled.prop="status == 'show' ? true : false" required> <option></option> <option value="1">男</option> <option value="2">女</option> </select> </div> <div class="form-group"> <label>年龄</label> <input type="number" class="form-control" v-model="current_user.age" :disabled.prop="status == 'show' ? true : false" required /> </div> <div class="form-group"> <label>地址</label> <input type="text" class="form-control" v-model="current_user.address" :disabled.prop="status == 'show' ? true : false" /> </div> <div class="form-group text-right"> <input type="submit" class="btn btn-success" value="保存" :disabled.prop="status == 'show' ? true : false" /> </div> </form> </div> <div class="row"> <table class="table table-bordered"> <thead> <tr> <th class="col-sm-2">姓名</th> <th class="col-sm-2">性别</th> <th class="col-sm-2">年龄</th> <th class="com-sm-5">地址</th> <th class="com-sm-1">操作</th> </tr> </thead> <tbody> <tr v-for="item in list"> <td>{{ item.name }}</td> <td>{{ item.sex == 1 ? "男" : "女" }}</td> <td>{{ item.age }}</td> <td>{{ item.address }}</td> <td> <input type="button" class="btn btn-default btn-xs" value="查看" @click="set_show(item)" /> <input type="button" class="btn btn-default btn-xs" value="编辑" @click="set_edit(item)"/> <input type="button" class="btn btn-default btn-xs" value="删除" @click="del_item(item)"/> </td> </tr> </tbody> </table> </div> <div class="row"> <input type="button" class="btn btn-success btn-add" value="新增" @click="set_add()" > </div> </div> <div class="mask"></div> <script src="./node_modules/vue/dist/vue.js"></script> <script src="./node_modules/element-ui/lib/index.js"></script> <script src="./node_modules/jquery/dist/jquery.js"></script> <script> function jsObjCopy(obj) { return JSON.parse(JSON.stringify(obj)); } function getGuid32() { var rt_str = String.fromCharCode(65 + Math.floor(Math.random() * 26)); for (i = 0; i < 31; ++i) { var num = Math.floor(Math.random() * (26 + 26 + 10)); var ch_str; if (num < 10) { ch_str = num.toString(); } else if (num < 10 + 26) { ch_str = String.fromCharCode(65 + num - 10); } else { ch_str = String.fromCharCode(97 + num - 10 - 26); } rt_str += ch_str; } return rt_str; } var myApp = new Vue({ el: "#app", data: { status: "add", current_user: new Object(), list: [] }, methods: { set_add: function() { this.status = "add"; this.current_user = new Object(); }, set_show: function(item) { this.status = "show"; this.current_user = jsObjCopy(item); }, set_edit: function(item) { this.status = "edit"; this.current_user = jsObjCopy(item); }, del_item: function(item) { var list = this.list; for (i = 0; i < list.length; ++i) { if (list[i].guid == item.guid) { list.splice(i, 1); break; } } }, form_submit: function() { if (this.status == "add") { this.current_user.guid = getGuid32(); this.list.push(jsObjCopy(this.current_user)); this.current_user = new Object(); } else if (this.status == "edit") { var list = this.list; for (i = 0; i < list.length; ++i) { if (list[i].guid == this.current_user.guid) { list.splice(i, 1, jsObjCopy(this.current_user)); break; } } } return false; } } }); </script> </body> </html>