基于Vue实现图书管理功能

本文实例为大家分享了vue简单的图书管理具体代码，供大家参考，具体内容如下

<table class="table table-bg table-border table-bordered">
<tr>
 <th>ID</th>
 <th>书名</th>
 <th>作者</th>
 <th>价格</th>
 <th>操作</th>
</tr>
<tr v-for="(book,index) in books">
 <td>{{book.id}}</td>
 <td>{{book.name}}</td>
 <td>{{book.author}}</td>
 <td>{{book.price}}</td>
 <td>
  <button class="btn" @click="delBook(index)">删除</button>
 </td>
</tr>
</table>

<fieldset>
<legend>添加新书</legend>
<p>书名：<input type="text" v-model="newBook.name"></p>
<p>作者：<input type="text" v-model="newBook.author"></p>
<p>价格：<input type="text" v-model="newBook.price"></p>
<p><button class="btn" @click="addBook">添加</button></p>
</fieldset>

<script>
new Vue({
el:'#books',
data:{
 books:[
  {id:1, name:'红楼梦', author:'曹雪芹', price:'1'},
  {id:2, name:'西游记', author:'吴承恩', price:'2'},
  {id:3, name:'水浒传', author:'施耐庵', price:'3'}
 ],
 newBook:{
  id:0,
  name:'',
  author:'',
  price:''
 }
},
methods:{
 delBook:function(idx){
  if(window.confirm('确认要删除？')){
   this.books.splice(idx, 1);
  }

},
 addBook:function(){
  // 约束
  if(this.newBook.name.length == 0) {
   alert('书名不能为空');
   return;
  }

if(this.newBook.author.length == 0){
   alert('书的作者不能为空');
   return;
  }

if(this.newBook.price.length == 0){
   this.newBook.price = '0'
  }

// 计算插入id
  var maxId = 0;
  for(var i=0; i<this.books.length; i++){
   if(maxId<this.books[i].id){
    maxId = this.books[i].id;
   }
  }
  this.newBook.id = maxId+1;

// 插入到 books中
  this.books.push(this.newBook);

// 清空新书
  this.newBook = {};
 }
}
});
</script>

效果图：

来源：http://blog.csdn.net/damys/article/details/72235587