运用了很多方法,学习了增删改查的实现
<!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>品牌管理</title>
<script src="../vue-2.4.0.js"></script>
<script src="./js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="../day02/bootstrap/css/bootstrap.min.css">
<script src="../day02/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
品牌管理
</h3>
</div>
<div class="panel-body">
<form class="form-inline" role="form">
<div class="form-group">
<label class="" for="name">ID</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称" v-model="id">
</div>
<div class="form-group">
<label class="" for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称" v-model="carName">
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" @click="add">添加</button>
<label class="" for="name">搜索</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称" v-model="searchObj">
</div>
</form>
</div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Time</th>
<th>delete------set</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in upObj()" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.carName}}</td>
<td>{{item.carTime | setTime('YYYY/MM/DD/hh/mm/ss')}}</td>
<td>
<!-- 模态框 -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal"
@click="delCar(item)">删除</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
</div>
<div class="modal-body">是否删除</div>
<div class="modal-footer">
<!-- ****************是否删除按钮 -->
<button type="button" class="btn btn-primary" data-dismiss="modal"
@click="del()">是</button>
<button type="button" class="btn btn-default"
data-dismiss="modal">否</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<button type="button" class="btn btn-primary " data-toggle="modal"
data-target="#myModal1" @click="setCg(item)">设置</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
</div>
<div class="modal-body">是否更改</div>
<input type="text" v-model="value">
<div class="modal-footer">
<!-- ****************是否删除按钮 -->
<button type="button" class="btn btn-primary " data-dismiss="modal"
@click="setCarName()">是</button>
<button type="button" class="btn btn-default"
data-dismiss="modal">否</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
<script>
Vue.filter('setTime', function (data, format) {
let y = data.getFullYear()
let m = (data.getMonth() + 1).toString().padStart(2, '0')
let d = data.getDate().toString().padStart(2, '0')
let h = data.getHours().toString().padStart(2, '0')
let m1 = data.getMinutes().toString().padStart(2, '0')
let s = data.getSeconds().toString().padStart(2, '0')
console.log(y, m, d, h, m1, s);
return format.replace('YYYY', y).replace('MM', m).replace('DD', d).replace('hh', h).replace('mm', m1).replace('ss', s)
})
let vm = new Vue({
el: '#app',
data: {
id: this.id,
carName: this.carName,
carTime: new Date(),
// 搜索框
searchObj: '',
// 删除元素索引
item: '',
// 修改数据索引
setItem:'',
// input框
value:'',
list: [
{
id: 1,
carName: '宝马',
carTime: new Date(),
},
{
id: 2,
carName: '奔驰',
carTime: new Date(),
},
]
},
methods: {
// 添加
add() {
let obj = {
id: this.id,
carName: this.carName,
carTime: new Date(),
}
if (this.list.some((item, index) => {
return item.id == obj.id
})) {
alert('id重复')
} else {
this.list.push(obj)
}
this.id = ''
this.carName = ''
},
// 删除前存索引
delCar(item) {
this.item = this.list.indexOf(item)
// console.log(this.item);
// this.list.splice(this.list.indexOf(item), 1)
},
// 通过splice截取删除
del() {
// console.log(this.item);
this.list.splice(this.item, 1)
},
// 搜索
upObj() {
return this.list.filter((item) => {
return item.carName.includes(this.searchObj)
})
},
// 点击设置存索引
setCg(item){
// console.log(this.value);
// console.log(this.list.indexOf(item));
this.setItem=this.list.indexOf(item)
},
// 修改数据
setCarName(){
// console.log(this.setItem);
this.list[this.setItem].carName = this.value
// this.list[item].carName = this.value
}
},
})
</script>
</html>