<!DOCTYPE html>
<html lang="en">
<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="../Script/Vue-2.5.1.8.js"></script>
<link rel="stylesheet" href="../CSS/BootStrap-3.3.7.css">
</head>
<body>
<div id='app'>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>Id:<input type="text" class="form-control" v-model="id"></label>
<label>BrandName:<input type="text" class="form-control" v-model="brandName"></label>
<input type="button" value="添加" class="btn btn-primary" @click="add()">
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>BrandName</th>
<th>UpdateTime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="(brand,index) in brandsList" v-bind:key="brand.id">
<td>{{brand.id}}</td>
<td>{{brand.brandName}}</td>
<td>{{brand.updateTime}}</td>
<td><a @click="del(index)" key>删除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
id:'',
brandName:'',
brandsList:[
{id:1,brandName:'得力',updateTime:new Date()},
{id:2,brandName:'科力普',updateTime:new Date()},
{id:3,brandName:'晨光',updateTime:new Date()},
{id:4,brandName:'英雄',updateTime:new Date()}
]
},
methods:{
add(){//在Vue中，数据已经双向绑定，当data里面的数据变化，页面会随之更新。
var brand={id:this.id,brandName:this.brandName,updateTime:new Date()};//构建对象
this.brandsList.push(brand);//更新数据
this.id=this.brandName='';//从右向左串联赋值
},
del(index){
this.brandsList.splice(index,1); //根据索引删除
}
}
});
</script>
</body>
</html>相关文章：