09用户列表页面案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-text,v-html指令</title> <script src="node_modules/vue/dist/vue.js"></script> <link href="node_modules/layui-src/src/css/layui.css" rel="stylesheet"> </head> <body> <div id="app"> <div class="layui-form-item"> <div class="layui-input-block"> <input type="text" placeholder="请输入昵称" class="layui-input" v-model="searchName"> </div> <button type="button" class="layui-btn layui-btn" @click="searchByName">查询用户</button> <div class="layui-input-block"> <input type="text" name="id" placeholder="id" v-model="id" class="layui-input"> </div> <div class="layui-input-block"> <input type="text" name="nickName" placeholder="昵称" v-model="nickName" class="layui-input"> </div> <div class="layui-input-block"> <input type="text" name="birthDay" placeholder="生日" v-model="birthDay" class="layui-input"> </div> <div class="layui-input-block"> <input type="text" name="notice" placeholder="个性签名" v-model="notice" class="layui-input"> </div> <div class="layui-input-block"> <input type="text" name="color" placeholder="颜色" v-model="color" class="layui-input"> </div> </div> <button type="button" class="layui-btn layui-btn" @click="add">添加用户</button> <table class="layui-table"> <colgroup> <col width="150"> <col width="200"> <col> </colgroup> <thead> <tr> <th>昵称</th> <th>生日</th> <th>个性签名</th> <th>个性颜色</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(user,index) in userList" :key="user.id"> <td>{{user.name}}</td> <td v-text="user.birthDay"></td> <td>{{user.notice}}</td> <td v-html="user.colorDemo"></td> <td><button type="button" class="layui-btn layui-btn-warm layui-btn layui-btn-sm layui-btn-radius" @click="delUser(user.id)">删除</button></td> </tr> </tbody> </table> </div> <script> var vm = new Vue({ el: '#app', data: { userList: [ { "id": 1, "name": "张三", "birthDay": "2020-01-01", "notice": "生活就像一把杀猪刀", "colorDemo": "<span style='color:red'>红色</span>" }, { "id": 2, "name": "李四", "birthDay": "2020-02-01", "notice": "生活就像一把杀猪刀", "colorDemo": "<span style='color:green'>绿色</span>" }, { "id": 3, "name": "王五", "birthDay": "2020-03-01", "notice": "生活就像一把杀猪刀", "colorDemo": "<span style='color:blue'>蓝色</span>" } ], nickName: "", id: "", notice: "", birthDay: "", color: "", searchName: "" }, methods: { delUser(id) { // let flag = confirm("确定要删除当前元素吗?"); // if (flag) { // for (let i = 0; i < this.userList.length; i++) { // if (this.userList[i].id == id) { // this.userList.splice(i, 1); // } // } // } let index = this.userList.findIndex(item => { if (item.id === id) { return true; } }); this.userList.splice(index, 1); }, add() { let user = { "name": this.nickName, "id": this.id, "birthDay": this.birthDay, "notice": this.notice, "colorDemo": this.color }; this.userList.push(user); }, searchByName() { let userx = this.userList.filter(item => { if (item.name.includes(this.searchName)) { return item; } }) this.userList=[]; for (const iterator of userx) { var newUser ={ "name": iterator.name, "id": iterator.id, "birthDay": iterator.birthDay, "notice": iterator.notice, "colorDemo": iterator.colorDemo } this.userList.push(newUser); } // for (const key in userx) { // let newUser ={ "name": userx[key].name, "id": userx[key].id, "birthDay": userx[key].birthDay, "notice": userx[key].notice, "colorDemo": user[key].colorDemo } // this.userList.push(newUser); // } } }, }) </script> </body> </html>
所需依赖：
1.npm i vue
2.npm i layui-src
浙公网安备 33010602011771号