Vue经典题型demo 练习

你的名字 2021-09-14 07:58 603阅读 0赞

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> <style> [v-cloak] { display: none } .btn-circle { border-radius: 3px; border: 1px solid #c0c0c0; cursor: pointer; display: inline-block; width: 16px; height: 16px; } </style> </head> <body> <section class="container" id="app"> <h2 class="text-center">学生信息表</h2>  <form class="form-horizontal"> <div class="form-group"> <label for="inputName" class="col-sm-3 col-sm-offset-1 control-label">学生姓名:</label> <div class="col-sm-5"> <input type="text" class="form-control" v-model="inputName" placeholder="学生姓名"> </div> </div>  <div class="form-group"> <label for="inputPhone" class="col-sm-3 col-sm-offset-1 control-label">联系方式:</label> <div class="col-sm-5"> <input type="text" class="form-control" v-model="inputPhone" placeholder="联系方式"> </div> </div> <div class="form-group"> <div class="col-sm-12 text-center"> <button type="button" class="btn btn-success" @click="addData" v-show="showOrHide"> <span class="glyphicon glyphicon-plus"></span> 添加信息 </button> <button type="button" class="btn btn-warning" @click="confirmEdit" v-show="!showOrHide" style="display:none"> <span class="glyphicon glyphicon-ok"></span> 确认编辑 </button> </div> </div> </form>  <table class="table" v-show="stus.length"> <thead> <tr> <th class="text-center col-sm-3">学号</th> <th class="text-center col-sm-3">学生姓名</th> <th class="text-center col-sm-3">联系方式</th> <th class="text-center col-sm-3">操作</th> </tr> </thead> <tbody id="showData" v-cloak> <tr class="text-center" v-for="(item,index) in stus" :key="index" :class="{'bg-danger':!item.isFinished}"> <th class="text-center">{ { item.id}}</th> <td>{ { item.name}}</td> <td>{ { item.phone}}</td> <td> <button type="button" class="btn btn-default btn-sm btn-edit" @click="editData(index)"> <span class="glyphicon glyphicon-edit"></span> 编辑</button>  <button type="button" class="btn btn-default btn-sm btn-del" data-toggle="modal" data-target=".bs-example-modal-sm" @click="findIndex(index)"> <span class="glyphicon glyphicon-remove-sign"></span> 删除 </button> <span class="glyphicon btn-circle" @click="isOk(index)" :class="{'glyphicon-ok':!item.isFinished}"></span> </td> </tr> <tr class="text-center"> <td>总人数为{ { lenNum}}</td> <td>未及格人数{ { noFinished}}</td> <td>及格人数{ { finished}}</td> <td class="text-center"> <button type="button" class="btn btn-danger btn-trash" data-toggle="modal" data-target=".bs-example-modal-sm" @click="clearBtn"> <span class="glyphicon glyphicon-trash"></span> 清空</button> </td> </tr> </tbody> </table> <div class="alert alert-warning text-center" role="alert" id="warning" style="display:none" v-show="!stus.length">暂无数据......</div>  <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title text-danger">{ { tips}}</h4> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary btn-danger" data-dismiss="modal" @click="removeData">确定</button> </div> </div> </div> </div> </section> </body> <script src="lib/jquery/jquery.min-v1.js"></script> <script src="lib/bootstrap/js/bootstrap.min.js"></script> <script src="lib/vue/vue.js"></script> <script> (function (Vue) { var data = [{ id: 'ID1505043900575', name: '小黑', phone: 1232222, isFinished:true }, { id: 'ID1505043903711', name: '小白', phone: 1233333, isFinished:false }, { id: 'ID1505043906767', name: '小花', phone: 1234444, isFinished:true }, { id: 'ID1505043941174', name: '小小', phone: 1235555, isFinished:false } ]; var app = new Vue({ el:'#app', data:{ stus:data, inputName:'', inputPhone:'', index:0, showOrHide:true, tips:'' }, computed:{ lenNum:function(){ return this.stus.length; }, finished:function(){ var count=0; for(var i=0;i<this.stus.length;i++){ if(this.stus[i].isFinished){ count++; } } return count; }, noFinished:function(){ return this.lenNum-this.finished; } }, methods:{ addData:function(){ var dt={ id:'ID'+new Date().getTime(), name:this.inputName, phone:this.inputPhone, isFinished:true } this.stus.push(dt); this.inputName=this.inputPhone=''; }, findIndex:function(i){ this.index=i; this.tips='\u60a8\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f\uff1f\uff1f'; this.showOrHide=true; this.inputName=this.inputPhone=''; }, removeData:function(){ if(this.index===-2){ this.stus=[]; }else{ this.stus.splice(this.index,1); } }, editData:function(i){ this.index=i; this.inputName=this.stus[i].name; this.inputPhone=this.stus[i].phone; this.showOrHide=false; }, confirmEdit:function(){ this.stus[this.index].name=this.inputName; this.stus[this.index].phone=this.inputPhone; this.showOrHide=true; this.inputName=this.inputPhone=''; }, clearBtn:function(){ this.index=-2; //在windows、windows service 默认以GBK的编码方式跟你保存 //linux、unix、windows service 服务端的系统 this.tips='\u60a8\u786e\u5b9a\u8981\u6e05\u7a7a\u5417\uff1f\uff1f\uff1f'; this.showOrHide=true; this.inputName=this.inputPhone=''; }, isOk:function(i){ this.stus[i].isFinished=!this.stus[i].isFinished } } }); })(Vue) </script> </html>