My booklist
My booklist
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<style>
.odd{
background-color: linen;
}
</style>
<body>
<div class="container" id="bookapp">
<h2>我的书单</h2>
<table class="table">
<tr>
<th>序号</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
<th>库存</th>
<th>操作</th>
</tr>
<tr v-for="(book,index) in books" v-bind:class="{odd:index%2==0}">
<td>{{index+1}}</td>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
<td>{{book.price}}</td>
<td>{{book.amount}}</td>
<td>
<span class="btn btn-danger" v-on:click='del(index)'>删除</span>
<span v-if="book.amount==0" style="color: red;">已售空</span>
</td>
</tr>
<tr>
<td colspan="6" align="right">
总价：<span>{{allPrice}}</span>
</td>
</tr>
</table>
<div style="width: 60%;">
<form class="form-horizontal" role='form'>
<div class="form-group">
<label for="">书名</label>
<input class="form-control" type="text" placeholder="请输入书名" v-model="book.name" />
</div>
<div class="form-group">
<label for="">作者</label>
<input class="form-control" type="text" placeholder="请输入作者" v-model="book.author"/>
</div>
<div class="form-group">
<label for="">价格</label>
<input class="form-control" type="number" placeholder="请输入价格" v-model="book.price" />
</div>
<div>
<input type="button" v-on:click="add" value="新增书籍" class="btn btn-primary">
</div>
</form>
</div>
</div>
<script>
new Vue({
el:'#bookapp',
data:{
book:{
author:'',
name:'',
price:100.0,
amount:0
},
books:[{
id: 1,
author: '曹雪芹',
name: '红楼梦',
price: 300.0,
amount:0
}, {
id: 2,
author: '施耐庵',
name: '水浒传',
price: 100.0,
amount:100
}, {
id: '3',
author: '罗贯中',
name: '三国演义',
price: 26.0,
amount:100
}, {
id: 4,
author: '吴承恩',
name: '西游记',
price: 200.0,
amount:0
}]
},
methods:{
add:function(){
this.books.push(this.book);
this.book={
author:'',
name:'',
price:0.0,
amont:100
}
},
del:function(index){
this.books.splice(index,1)
}
},
computed:{
allPrice:function(){
var price =0;
for(var i =0;i<this.books.length;i++){
price +=this.books[i].price;
}
return price;
}
}
})
</script>