使用vue实现用户管理 添加及删除功能
2021/7/25 23:45:09
本文主要是介绍使用vue实现用户管理 添加及删除功能,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
简单的管理系统-增删改查
添加及删除功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户管理</title> <script src="../js/vue-2.4.0.js"></script> <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.css"/> </head> <body> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">用户管理</h3> </div> <div class="panel-body"> <form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Id:</label> <input type="text" class="form-control" id="exampleInputName2" v-model="id"> </div> <div class="form-group"> <label for="exampleInputEmail2">Name:</label> <input type="text" class="form-control" id="exampleInputEmail2" v-model="name"> </div> <button type="button" class="btn btn-primary" @click="add()">添加</button> <div class="form-group"> <label for="exampleInputName3">搜索名称关键字:</label> <input type="text" class="form-control" id="exampleInputName3" > </div> </form> </div> </div> <table class="table table-bordered table-striped table-hover"> <tr> <th>Id</th> <th>Name</th> <th>CTime</th> <th>Operation</th> </tr> <tr v-for="item in userList"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.ctime}}</td> <td><a href="#" class="btn btn-primary" @click.prevent="del(item.id)">删除</a></td> </tr> </table> </div> <script type="text/javascript"> let vm = new Vue({ el: "#app", data: { userList:[ {id:1,name:"刘备",ctime: new Date()}, {id:2,name:"关羽",ctime: new Date()}, {id:3,name:"张飞",ctime: new Date()}, ], id:'', name:'' }, methods: { add() { let user = {id:this.id,name:this.name,ctime: new Date()}; this.userList.push(user); this.id = this.name = ''; }, del(userId) { let index = this.userList.findIndex(item => item.id==userId); this.userList.splice(index, 1); } } }); </script> </body> </html>
添加根据名字搜索功能
<html> <head> <meta charset="UTF-8"> <title>用户管理</title> <script src="../js/vue-2.4.0.js"></script> <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.css"/> </head> <body> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">用户管理</h3> </div> <div class="panel-body"> <form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Id:</label> <input type="text" class="form-control" id="exampleInputName2" v-model="id"> </div> <div class="form-group"> <label for="exampleInputEmail2">Name:</label> <input type="text" class="form-control" id="exampleInputEmail2" v-model="name" @keydown.enter="add()"> </div> <button type="button" class="btn btn-primary" @click="add()">添加</button> <div class="form-group"> <label for="exampleInputName3">搜索名称关键字:</label> <input type="text" class="form-control" id="exampleInputName3" v-model="keyWord" v-focus> </div> </form> </div> </div> <table class="table table-bordered table-striped table-hover"> <tr> <th>Id</th> <th>Name</th> <th>CTime</th> <th>Operation</th> </tr> <tr v-for="item in search(keyWord)"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.ctime | formatDate('yyyy-mm-dd hh:mm:ss')}}</td> <td><a href="#" class="btn btn-primary" @click.prevent="del(item.id)">删除</a></td> </tr> </table> </div> <script type="text/javascript"> //自定义键盘码 //Vue.config.keyCodes.f2 = 113 //全局指令 Vue.directive("focus",{ inserted: function(el) { el.focus(); } }) Vue.filter("formatDate",function(data, pattern) { let year = data.getFullYear(); let month = (data.getMonth() + 1).toString().padStart(2,'0'); let day = data.getDate().toString().padStart(2,'0'); if(pattern==null || pattern==''){ return `${year}年${month}月${day}日` }else { let h = data.getHours().toString().padStart(2,'0'); let m = data.getMinutes().toString().padStart(2,'0'); let s = data.getSeconds().toString().padStart(2,'0'); return `${year}年${month}月${day}日 ${h}:${m}:${s}` } }) let vm = new Vue({ el: "#app", data: { userList:[ {id:1,name:"刘备",ctime: new Date()}, {id:2,name:"关羽",ctime: new Date()}, {id:3,name:"张飞",ctime: new Date()}, ], id:'', name:'', keyWord:'' }, methods: { add() { let user = {id:this.id,name:this.name,ctime: new Date()}; this.userList.push(user); this.id = this.name = ''; }, del(userId) { let index = this.userList.findIndex(item => item.id==userId); this.userList.splice(index, 1); }, search(keyWord) { return this.userList.filter(item => item.name.includes(keyWord)) } } }); </script> </body> </html>
功能还有很多很多的缺点,这只是在学习过程中的一个小练习,复习相关知识
这篇关于使用vue实现用户管理 添加及删除功能的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist