<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> </head> <body> <div id="app" style="width: 1000px;margin: 0 auto;margin-top: 60px;"> <div class="form-group"> <label>手机号</label> <input type="text" class="form-control" placeholder="(请输入手机号)" style="width: 500px;" v-model="mobile" /> </div> <div class="form-group"> <label>邮箱</label> <input type="text" class="form-control" placeholder="(请输入电子邮箱)" style="width: 500px;" v-model="email" /> </div> <div class="form-group"> <label>真实姓名</label> <input type="text" class="form-control" placeholder="(姓名必须是中文汉字)" style="width: 500px;" v-model="realname" /> </div> <button type="button" class="btn btn-primary" @click="add">立即添加</button> <p v-for="(v,k) in errors" style="margin: 0 auto;margin-top: 20px;color: red;font-size: 18px;"> {{v}} </p> <div style="margin-top: 60px;"> <table class="table table-hover"> <th><input type="checkbox" v-model="isCheck" @click="check()"></th> <th>编号</th> <th>手机号</th> <th>邮箱</th> <th>真实姓名</th> <th>操作</th> <tr v-for="(v,k) in user"> <td><input type="checkbox" v-model="v.status"></td> <td>{{v.id}}</td> <td>{{v.mobile}}</td> <td>{{v.email}}</td> <td>{{v.realname}}</td> <td><button class="btn btn-danger" @click="del(k)">删除</button></td> </tr> </table> <button class="btn btn-danger" @click="checkAll()">全选</button> <button class="btn btn-danger" @click="checkNo()">全不选</button> <button class="btn btn-danger" @click="checkRev()">反选</button> <button class="btn btn-danger" @click="checkDel()">批量删除</button> </div> </div> </body> </html> <script> new Vue({ el: "#app", data: { mobile: "", email: "", realname: "", errors: [], isCheck: false, user: [{ id: 1, mobile: '18518393112', email: '123131@qq.com', realname: '邓超', status: false }, { id: 2, mobile: '18518393000', email: '3322441@qq.com', realname: '戎飞', status: false } ] }, methods: { //添加 add() { if (this.checkForm()) { //window.location.href = 'success.html' var obj = { id: this.user.length + 1, mobile: this.mobile, email: this.email, realname: this.realname, status: false } this.user.push(obj); } }, //表单验证 checkForm() { this.errors = []; if (this.mobile == '') { this.errors.push('手机号不能为空'); return false; } var regMobile = /^1[35789]\d{9}$/; if (!regMobile.test(this.mobile)) { this.errors.push('手机号格式不正确'); return false; } if (this.email == '') { this.errors.push('邮箱不能为空'); return false; } var regEmail = /^\w{6,30}@\w{2,6}\.+(com|cn)$/; if (!regEmail.test(this.email)) { this.errors.push('邮箱格式为空'); return false; } if (this.realname == '') { this.errors.push('真实姓名不能为空'); return false; } var regRealname = /^[\u4e00-\u9fa5]{2,5}$/i; if (!regRealname.test(this.realname)) { this.errors.push('真实姓名格式不正确'); return false; } if (this.errors.length == 0) { return true; } else { return false; } }, //全选 checkAll() { this.user.map(function(v, k) { v.status = true; }); }, //全不选 checkNo() { this.user.map(function(v, k) { v.status = false; }); }, //反选 checkRev() { this.user.map(function(v, k) { v.status = !v.status; }); }, //删除 del(k) { this.user.splice(k, 1); }, //批量删除 checkDel() { var arr = []; this.user.map(function(v, k) { if (v.status == false) { arr.push(v); } }); this.user = arr; }, //点击复选框,全选/取消全选 check() { if (this.isCheck == false) { this.user.map(function(v, k) { v.status = true; }); } else { this.user.map(function(v, k) { v.status = false; }); } } } }); </script>