版权声明：Meter.Bulacn https://blog.csdn.net/qq_41500222/article/details/83244061
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="app">
<!-- {{test}} -->
<div class="panel panel-primary">
<div class="panel-heading">添加品牌</div>
</div>
<div id="app" class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-body">
<!-- <p>...</p> -->
<!-- ID:<input type="text" placeholder="ID" v-model="ID"> 品牌名称:<input type="text" placeholder="品牌名称" v-model="lastName"> <button @click="update">添加</button> -->
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">ID</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="ID" v-model="id">
</div>
<div class="form-group">
<label for="exampleInputEmail2">品牌名称</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="品牌名称" v-model="pinpai">
</div>
<button type="submit" class="btn btn-default" @click="updateP" style="background: #3CA9C4; color: white ">添加</button>
</form>
</div>
<!-- Table -->
<table class="table">
<tr>
<td class="active" style="">ID</td>
<td class="success">品牌名称</td>
<td class="warning">操作(Operation)</td>
</tr>
<tr v-for="(p, index) in content" :key="index">
<td>{{p.ID}}</td>
<td>{{p.pinpai}}</td>
<td><button @click="deleteP(index)">删除</button></td>
</tr>
</table>
</div>
</div>
<script src="" async defer></script>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
test:'这是一个测试数据',
id:'',
pinpai:'',
content:[
{ID:'1',pinpai:'奔驰'},
{ID:'2',pinpai:'宝马'}
]
},
methods: {
deleteP(index){
this.content.splice(index, 1);
},
updateP(){
this.content.push({ID:this.id,pinpai:this.pinpai})
}
},
})
</script>
</body>
</html>