<!DOCTYPE html>
<html>
<head>
<meta charset=‘utf-8‘>
<meta http-equiv=‘X-UA-Compatible‘ content=‘IE=edge‘>
<title>品牌列表</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<!--完成添加功能-->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<!--id-->
<div class="panel-body form-inline">
<label>
id :
<input type="text" class="form-control" v-model="id">
</label>
<!--搜索-->
<label>
name :
<input type="text" class="form-control" v-model="name">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add()">
</div>
</div>
<!--下面的代码表示展示区域-->
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.ctime }}</td>
<td>
<a href="#" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue ({
el : "#app",
data : {
id : ‘‘,
name : ‘‘,
list : [
{id: 1, name: ‘法拉第‘, ctime:new Date() },
{id: 2, name: ‘玛莎拉蒂‘, ctime:new Date() }
]
},
methods : {
add(){ //这是添加的方法
//获取id，name
var car = {id : this.id, name : this.name, ctime:new Date() }
this.list.push(car)
this.id = this.name = ‘‘
},
del(id){ //这是删除的方法 根据id删除数据
// console.log("hjjaha") //测试
this.list.some((item, i)=>{
if(item.id == id){
this.list.splice(i,1)
return true;
}
})
}
}
});
</script>
</body>
</html>
效果图如下:
