在这里插入代码片<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app" class="container p-3">
<button class="btn btn-block btn-info" data-toggle="modal" data-target="#cc" >新增</button>
<input type="text" v-model="sname" class="form-control my-3" />
<table class="table table-bordered my-3">
<tr>
<th>姓名</th>
<th @click="paixu()">年龄 ↓ </th>
<th>性别</th>
<th>项目</th>
<th>技师选择</th>
<th>备注</th>
<th>操作</th>
</tr>
<tr v-for="item in zuizhongshuzu">
<td> {{item.name}} </td>
<td> {{item.age}}</td>
<td> {{item.sex}}</td>
<td> {{ item.xm.join(",") }}</td>
<td> {{item.jishi}}</td>
<td> {{item.remark}}</td>
<td> <button class="btn btn-sm btn-danger" @click="del(item)" >删除</button> </td>
</tr>
</table>
<div class="modal" id="cc">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">编辑信息 </h4>
</div>
<div class="modal-body">
<div class="row my-3">
<div class="col-3">姓名：</div>
<div class="col-9"> <input type="text" v-model="info.name" class="form-control"/> </div>
</div>
<div class="row my-3">
<div class="col-3">年龄：</div>
<div class="col-9"> <input type="number" v-model="info.age" class="form-control"/> </div>
</div>
<div class="row my-3">
<div class="col-3">性别：</div>
<div class="col-9">
<input type="radio" name="sex" value="男" v-model="info.sex" /> 男
<input type="radio" name="sex" value="女" v-model="info.sex" /> 女
</div>
</div>
<div class="row my-3">
<div class="col-3">项目：</div>
<div class="col-9">
<input type="checkbox" value="洗脚" v-model="info.xm" /> 洗脚
<input type="checkbox" value="按摩" v-model="info.xm" /> 按摩
<input type="checkbox" value="spa" v-model="info.xm" /> spa
<input type="checkbox" value="采耳" v-model="info.xm" /> 采耳
</div>
</div>
<div class="row my-3">
<div class="col-3">技师选择：</div>
<div class="col-9">
<select v-model="info.jishi" class="form-control">
<option value="小红">小红</option>
<option value="小想">小想</option>
<option value="冉红">冉红</option>
</select>
</div>
</div>
<div class="row my-3">
<div class="col-3">备注：</div>
<div class="col-9"> <textarea v-model="info.remark" class="form-control"></textarea> </div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" @click="add()" data-dismiss="modal" >添加</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal" >关闭</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
// 在项目初始化时,一组信息,通常可以定义为 一个对象,然后操作整个对象的内容
new Vue({
el:"#app",
data:{
plays:[
{
id:1,
name:"小明",
sex:"男",
age:28,
xm:['洗脚'],
jishi:"小红",
remark:"qwe"
},
{
id:2,
name:"理想",
sex:"男",
age:38,
xm:['spa','采耳'],
jishi:"冉红",
remark:"备注些"
},
{
id:3,
name:"富强",
sex:"女",
age:35,
xm:['按摩'],
jishi:"小想",
remark:"匹配"
}
],
info:{
id:0,
name:"",
sex:"男",
age:18,
xm:[],
jishi:"",
remark:""
},
sname:""
},
methods:{
add(){
// 放到数组的最后
//每次让id自增作为唯一标识
this.info.id = this.plays.length+1;
this.plays.push(this.info);
this.info={
id:0,
name:"",
sex:"男",
age:18,
xm:[],
jishi:"",
remark:""
}
},
paixu(){
//如何按照年龄进行排序？ 数组中的 对象的 某一个具体的值
// 排序 使用的方法为 sort sort 为变异方法, 可以直接更改原数组的内容
// 排序需要默认传递两个参数 内容, 第一个参数为后一个数组内容( 数组中第二个元素到最后一个元素 ) 第二个参数为 前一个数组内容,(数组中的第一个元素到倒数第二个元素)
// 排序方法中需要获取到 返回值,依据返回值进行新的判定, (返回值为需要对比的数值差，)
// 升序 由小到大 为 后一个元素减去前一个元素
// 降序 由大到小 为 前一个元素指定的值减去后一个元素指定的值
this.plays.sort(function(houyige,qianyige){
return qianyige.age - houyige.age
});
},
// search(){
// console.log(this.sname)
// var sname = this.sname;
// // 数组的 filter 是一个非变异的方法, 也就是不会更改原数组内容
// // 我们通常需要重新接受数组,才能展示新的内容
// // filter 的用法 ,就是过滤数组的内容, 里面需要一个函数function 参数为每一个数组的内容,
// // 如果 filter中的方法 返回的是true 则 保留该数据, 如果返回是 false 则删除该数据
// this.plays = this.plays.filter(function(item){
// console.log(sname)
// return item.name.indexOf(sname)!=-1;
// })
// },
del(item){
//删除的时候就需要通过 filter来对比id的值从而删除对应的对象内容
this.plays = this.plays.filter(function(play){
return play.id != item.id
})
}
},
// 我们可以使用计算的形式,来实现过滤,为了保留原数组不发生改变
computed:{
zuizhongshuzu(){
var sname = this.sname;
return this.plays.filter(function(item){
return item.name.indexOf(sname)!=-1 ;
})
}
}
})
</script>
</html>
本文含有隐藏内容，请 开通VIP 后查看