..............
2018-10-10 本文已影响0人
暴走的金坤酸奶味
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/boot.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="row">
<div class="col-lg-2 "><h2> 添加商品</h2></div>
<div class="col-lg-2 "></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
</div>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">ID</label>
<input type="text" class="form-control" v-model="productid" >
</div>
<div class="form-group">
<label for="exampleInputEmail2">品牌名称</label>
<input type="email" class="form-control" v-model="productname" >
</div>
<button type="submit" class="btn btn-primary" @click="addProduct">添加</button>
</form>
<div class="rit"></div>
<table class="list">
<tr>
<th>ID</th>
<th>品牌名称</th>
<th>操作</th>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<a href="#" @click="del(item.id)">删除</a>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="js/boot.js"></script>
</body>
</html>
new Vue({
el:'#app',
data:{
list:[
{id:1,name:'宝马'},
{id:2,name:'奥迪'}
]
},
methods:{
addProduct:function(){
if(!this.productid || !this.productname) {
alert('空值')
return
}
var pobj = {id:this.productid,name:this.productname};
this.list.push(pobj);
this.productname ='';
this.productid = "";
},
del:function(id){
var index = this.list.findIndex(function(obj){
return obj.id == id;
});
this.list.splice(index,1);
},
}
});
.row{
height: 70px;background-color: blue;color: white;
}
.form-inline{
margin-top: 20px;
margin-left: 18px;
}
h2{margin-left: 18px;}
.rit{height: 3px;background-color: #808080;margin-top: 30px;}
.list{
width: 1400px;
border-top: 1px solid black;
margin-top: 80px;
}
.list th{
padding: 5px;
height: 45px;
width: 300px;
font-size: 18px;
margin-left: 10px;
}
.list td{
padding: 5px;
border-top: 1px solid black;
border-bottom: 1px solid black;
height: 45px;
margin-left: 10px;
}
