vue.js加jQuery加bootstrap实现的增删改查的案例
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加油！！
