当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 基于Vue实现图书管理功能

基于Vue实现图书管理功能

2017年12月12日  | 移动技术网IT编程  | 我要评论

徐峻平,最终进化的少年,看看看

本文实例为大家分享了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>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网