用vue实现增删改查
1、some(回调函数（item，index）) ⽅法测试数组中是不是⾄少有1个元素通过了被提供的函数测 试。3、 splice() ⽅法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被 修改的内容。此⽅法会改变原数组。2、find() ⽅法返回数组中满⾜提供的测试函数的第⼀个元素的值。6、indexOf()⽅法返回在数组中可以找到⼀个给定元素的第⼀个索引，如果不存在，则返
·
1、some(回调函数（item，index）) ⽅法测试数组中是不是⾄少有1个元素通过了被提供的函数测 试。它返回的是⼀个Boolean类型的值
2、find() ⽅法返回数组中满⾜提供的测试函数的第⼀个元素的值。否则返回 undefined。
3、 splice() ⽅法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被 修改的内容。此⽅法会改变原数组。
4、 includes() ⽅法⽤于判断⼀个字符串是否包含在另⼀个字符串中，根据情况返回 true 或 false。
5、 filter() ⽅法创建⼀个新数组, 其包含通过所提供函数实现的测试的所有元素。
6、indexOf()⽅法返回在数组中可以找到⼀个给定元素的第⼀个索引，如果不存在，则返回-1。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入所需的库-->
<script src="../vue-2.4.0.js"></script>
<script src="../jquery-3.4.1.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<style>
.gg{
padding: 0;
}
</style>
</head>
<body>
<div id="app">
<!-- 版心 -->
<div class="container">
<div class="modal " id="modal-id">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Name</h4>
</div>
<div class="modal-body">
<label for="">请输入要更改的：</label>
<input type="text" v-model="carChange" >
</div>
<div class="modal-footer" >
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" data-dismiss='modal' @click="change()">修改保存</button>
</div>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body">
<form action="" method="POST" class="form-inline" role="form">
<!-- id -->
<div class="form-group">
<label for="">Id：</label>
<input type="number" class="form-control" id="" placeholder="请输入ID" v-model="carId">
</div>
<!-- name -->
<div class="form-group">
<label for="">Name：</label>
<input type="text" class="form-control" id="" placeholder="请输入品牌名" v-model="carName">
</div>
<!-- 添加按钮 -->
<button type="button" class="btn btn-primary" @click="add">添加品牌</button>
<!-- 查找 -->
<div class="form-group">
<label for="">搜索关键字</label>
<input @keyup='search' type="text" class="form-control" id="" placeholder="请输入要搜索的关键字" v-model="keySearch">
</div>
</form>
<!-- 表格区域 -->
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in search()" :key="item.carId">
<td>{{item.carId}}</td>
<td>{{item.carName}}</td>
<td>{{item.Time}}</td>
<td>
<button type="button" class="btn btn-default" @click="del(item)">删除</button>
<button type="button" class="btn btn-default gg"><a class="btn btn-primary" data-toggle="modal" href='#modal-id' @click="modify(item)">修改数据</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el:'#app',
data:{
list:[
{
carId:1,
carName:'奔驰',
Time:new Date()
},
{
carId:2,
carName:'宝马',
Time:new Date()
},
],
carId:'',
carName:'',
Time:'',
keySearch:'',
carChange:'',
index:''
},
methods:{
// 添加按钮
add(){
// 新建一个对象
let obj={
carId:this.carId,
carName:this.carName,
Time:new Date()
}
// some(回调函数（item，index）) ⽅法测试数组中是不是⾄少有1个元素通过了被提供的函数测试。
// 它返回的是⼀个Boolean类型的值
// 利用这个方法来判断它里面是否拥有这个值
console.log();
if(this.list.some(item=>item.carId==this.carId||this.carId==0)){
alert('Id是唯一值，不能重复')
}else{
this.list.push(obj)
}
// 点击后将框的值赋空
this.carId=''
this.carName=''
},
// 删除按钮
del(item){
// splice() ⽅法通过删除或替换现有元素或者原地添加新的元素来修改数组,
// 并以数组形式返回被 修改的内容。此⽅法会改变原数组
this.list.splice(this.list.indexOf(item),1)
},
// 搜索按钮
search(){
// filter() ⽅法创建⼀个新数组, 其包含通过所提供函数实现的测试的所有元素。
// indexOf()⽅法返回在数组中可以找到⼀个给定元素的第⼀个索引，如果不存在，则返回-1。
// includes() ⽅法⽤于判断⼀个字符串是否包含在另⼀个字符串中，根据情况返回 true 或 false。
return this.list.filter(item=>{
return item.carName.includes(this.keySearch)
})
},
// 更改
modify(item){
this.index=(this.list.indexOf(item))
},
// 确认更改
change(){
this.list[this.index].carName=this.carChange
alert('修改成功')
$('#modal-id').hide()
},
}
})
</script>
</html>
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)