css样式跟HTML代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script type="text/javascript" src="js/vue.min.js"></script> <script type="text/javascript" src="js/jquery1.2.6.js"></script> <style> .margintop { margin-top: 100px; } .search { width: 60%; display: inline-block; } #table .center { text-align: center; } #table table tbody td input { width: 80px; border: none; outline: none; } </style> </head> <body> <div class="container margintop" id="table"> <div class="col-md-3"> <div class="form-group"> <label>id:</label> <input type="text" class="form-control id" placeholder="请输入您的id号"> </div> <div class="form-group"> <label>姓名:</label> <input type="text" class="form-control name" placeholder="请输入您的姓名"> </div> <div class="form-group"> <label>年龄:</label> <input type="text" class="form-control age" placeholder="请输入您的年龄"> </div> <div class="form-group"> <label>身高:</label> <input type="text" class="form-control height" placeholder="请输入您的身高"> </div> <div class="form-group"> <label>学校:</label> <input type="text" class="form-control school" placeholder="请输入您的学校"> </div> <div class="form-group"> <button class="btn btn-primary" @click="add()">添加人物</button> </div> </div> <div class="col-md-9"> <div class="form-group"> <input type="text" class="form-control search" placeholder="请输入关键字" v-model="keyword"> <input type="button" class="btn btn-primary" value="立即搜索"> </div> <table class="table table-bordered"> <thead> <tr> <th>id</th> <th>姓名</th> <th>年龄</th> <th>身高</th> <th>学校</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(value, index) in newData" class="data-row"> <td><input type="text" v-model="newData[index].id" readonly="readonly"></td> <td><input type="text" v-model="newData[index].name" readonly="readonly"></td> <td><input type="text" v-model="newData[index].age" readonly="readonly"></td> <td><input type="text" v-model="newData[index].height" readonly="readonly"></td> <td><input type="text" v-model="newData[index].school" readonly="readonly"></td> <td class="center"> <a href="void:javascript" class="btn btn-primary" @click="edit(index)">修改</a> <a href="void:javascript" class="btn btn-success" @click="save(index)">保存</a> <a href="void:javascript" class="btn btn btn-danger" @click="del(index)">删除</a> </td> </tr> </tbody> </table> </div> </div> </body> </html>
JavaScript代码:
<script> var v = new Vue({ el: "#table", data: { msg: [{ id: "1", name: "张三", age: "28", height: "180cm", school: "清华大学" }, { id: "2", name: "李四", age: "24", height: "183cm", school: "北京大学" }, { id: "3", name: "王五", age: "13", height: "150cm", school: "哈佛大学" }, { id: "4", name: "赵六", age: "22", height: "167cm", school: "逗比大学" }, { id: "5", name: "哈哈", age: "15", height: "176cm", school: "野鸡大学" }, { id: "6", name: "小小", age: "14", height: "126cm", school: "百度大学" }, { id: "7", name: "大白", age: "35", height: "171cm", school: "美国大学" }], editflag: false, keyword: "" }, methods: { //添加信息 add: function() { var obj = {}; var id = document.querySelector(".id").value; //姓名 var name = document.querySelector(".name").value; //姓名 var age = document.querySelector(".age").value; //年龄 var height = document.querySelector(".height").value; //身高 var school = document.querySelector(".school").value; //学校 obj.id = id ; obj.name = name; obj.age = age; obj.height = height; obj.school = school; this.msg.push(obj); }, //删除信息 del: function(index) { console.log(index); this.msg.splice(index, 1); }, //修改信息 edit: function(index) { if (!this.editflag) { console.log($(".data-row").eq(index).find("input")); $(".data-row").eq(index).find("input").each(function() { //开启可编辑状态 $(this).removeAttr("readonly"); }); this.editflag = !this.editflag; } }, //保存信息 save: function(index) { var obj = {}; console.log(this.msg[index]); obj.id = $(".data-row").eq(index).find("input").eq(0).val(); //id赋值 obj.name = $(".data-row").eq(index).find("input").eq(1).val(); //name赋值 obj.age = $(".data-row").eq(index).find("input").eq(2).val(); //age赋值 obj.height = $(".data-row").eq(index).find("input").eq(3).val(); //height赋值 obj.school = $(".data-row").eq(index).find("input").eq(4).val(); //school赋值 this.msg[index] = obj; if (this.editflag) { $(".data-row").eq(index).find("input").each(function() { //关闭可编辑状态 $(this).attr("readonly", "readonly"); }); this.editflag = !this.editflag; } //console.log(this.msg[index]); alert("保存成功!"); }, seach: function() { //点击设置搜索的关键字 this.keyword = $(".seach").val(); } }, computed: { //过滤掉关键字 newData: function() { var keyword = this.keyword; return this.msg.filter(function(item) { return item.id.indexOf(keyword) > -1 || item.name.indexOf(keyword) > -1 || item.age.indexOf(keyword) > -1 || item.height.indexOf(keyword) > -1 || item.school.indexOf(keyword) > -1; }); } } }); </script>
用于学习复习笔记。2018加油!!