1、案例中使用bootstrap.css快速添加样式。
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue学习day05</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="./lib/bootstrap.min.css">
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--敲入命令 npm install babel-core@5 引入 babel(es6的翻译器)-->
<script src="./node_modules/babel-core/browser.min.js">
</script>
<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>
商品
<!--<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-bordered table-hover table-striped">
<thead>
<tr>
<th>ID</th>
<th>商品</th>
<th>时间</th>
<th>操作</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>
<!--不刷新页面prevent-->
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el:"#app",
id:"",
name:"",
data: {
list:[
{id:1,name:"ipad平板",ctime:new Date()},
{id:2,name:"联想笔记本",ctime:new Date()},
{id:3,name:"华为P40",ctime:new Date()},
]
},
methods:{
//添加
add:function () {
var goods={id:this.id,name:this.name,ctime:new Date()}
this.list.push(goods);
this.id=this.name="";
},
//删除
del:function (id) {
var index = this.list.findIndex(function (item,i) {
if(id == item.id){
console.log(i)
return true;}
});
this.list.splice(index,1);
}
}
});
</script>
</body>
</html>
2、效果图: