<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 " >
<title></title>
</head>
<body>
<div id="app">
<mytitle></mytitle>
<div id="divTblBook ">
<table class="table table-hover ">
<thead>
<tr>
<th v-for="b in bookShow ">{{b}}</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in books ">
<td v-for="b in item ">{{b}}</td>
<td>
<button class="btn btn-primary " v-on:click="delBook(item)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<div id="divAddBook" style="padding:20px;">
<p>添加书籍</p>
<div v-for="b in bookShow ">
<div class="form-group ">
<label for=" ">{{b}}</label>
<input type="text " class="form-control " v-model="book[$key] "/>
</div>
</div>
<button class="btn btn-primary " v-on:click="addBook() ">保存</button>
</div>
</div>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css " rel="stylesheet ">
<script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js "></script>
<script>
var vm=new Vue({
el:'#app',
components:{
'mytitle':{
'template':'<h1 v-text="title"></h1>',
data:function(){
return {
title:'我的名片'
}
}
}
},
data:{
books: [{
author: '曹雪芹',
name: '红楼梦',
price: 32.0
}, {
author: '施耐庵',
name: '水浒传',
price: 30.0
}, {
author: '罗贯中',
name: '三国演义',
price: 24.0
}, {
author: '吴承恩',
name: '西游记',
price: 20.0
}],
book:{
Name:'',
Author:'',
price:''
},
bookShow: {
Name: "书名",
Author: "作者",
price: "价格"
}
},
methods:{
addBook:function(){
this.books.push(this.book);
},
delBook:function(item){
this.books.$remove(item);
}
}
})
</script>
</body>
</html>