vue实现品牌管理
利用数据实现视图层变化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="./vue-2.4.0.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<script src="./bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div class="container">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-heading">
<h3 class="panel-title"> 添加品牌</h3>
</div>
</div>
<div class="panel-body">
<form class="form-inline" role="form">
<div class="form-group">
<div class="form-group">
<label for="">Id:</label>
<input type="email" class="form-control" id="" placeholder="Input field"
v-model="newid">
</div>
</div>
<div class="form-group">
<div class="form-group">
<label for="">Name:</label>
<input type="email" class="form-control" id="" placeholder="Input field"
v-model="newname">
</div>
</div>
<button type="button" class="btn btn-primary" @click="addname">添加</button>
<div class="form-group">
<div class="form-group">
<label for="">搜索名称关键字:</label>
<input type="email" class="form-control" id="" placeholder="Input field"
v-model="value">
</div>
</div>
</form>
</div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>ctime </th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in getlist()" :key="item.carid">
<td>{{item.carid}}</td>
<td>{{item.carname}}</td>
<td>{{item.ctime | filtime('YYYY/MM/DD/HH.M1M1.SS')}}</td>
<td>
<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>
<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
</div>
<div class="modal-body">确认删除？ ?</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"
@click="del(item)">确认删除</button>
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-danger" data-toggle="modal"
data-target="#myModal" @click="delCar(item)">删除</button>
<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>
<h4 class="modal-title" id="myModal1Label">修改你的数据</h4>
</div>
<div class="modal-body">真的确认修改吗?</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"
@click="change(item)">确认修改</button>
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-toggle="modal"
data-target="#myModal1">修改</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
Vue.filter('filtime', function (a, b) {
var y = a.getFullYear()
var m = (a.getMonth() + 1).toString().padStart(2, 0)
var d = a.getDate().toString().padStart(2, 0)
var h = a.getHours().toString().padStart(2, 0)
var m1 = a.getMinutes().toString().padStart(2, 0)
var s = a.getSeconds().toString().padStart(2, 0)
console.log(y, m, d);
return b.replace('YYYY', y).replace('MM', m).replace('DD', d).replace('HH', h).replace('M1M1', m1).replace('SS', s)
})
var vm = new Vue({
el: '#app',
data: {
value: '',
newid: '',
newname: '',
// 删除元素索引
item: '',
list: [
{
carid: 1,
carname: '奔驰',
ctime: new Date()
},
{
carid: 2,
carname: '宝马',
ctime: new Date()
},
]
},
methods: {
addname(item) {
console.log(item);
var obj = {
carid: this.newid,
carname: this.newname,
ctime: new Date()
}
if (this.list.find((item) => item.carid == this.newid)) {
alert('idchongfu')
} else {
console.log(obj);
this.list.push(obj)
}
this.carId = ''
this.carName = ''
},
getlist() {
return this.list.filter((item) => {
return item.carname.includes(this.value)
})
},
// 删除品牌
delCar(item) {
this.item = this.list.indexOf(item)
// console.log(this.item);
// this.list.splice(this.list.indexOf(item), 1)
},
del(item) {
// console.log(this.item);
this.list.splice(this.item, 1)
},
/* deletename(item) {
// 获取删除之前的索引值
console.log(this.list.indexOf(item));
// 获取索引值对应的item对象
console.log(item);
console.log(this.list.indexOf(item));
this.list.splice(this.list.indexOf(item), 1)
}, */
change(item) {
}
},
})
</script>
</body>
</html>
扫一扫
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
