Vue implementation of book management examples

This article mainly introduces Vue to implement library management, shares the knowledge points used in the library management demo, and summarizes the problems encountered. It has certain reference value. Interested friends can refer to it. I hope it can help everyone. .

The company's projects in the future require the use of vue.js knowledge. I have not learned it in Angular. I only know a little bit about node.js and react, so it is difficult to learn it. If you want to learn vue.js knowledge, the recommended website: http://vuejs.org/

The details are as follows:

1. Knowledge points for library management demo

1. bootstrap: http://getbootstrap.com/

2. vuejs: http://getbootstrap.com/

The specific code is as follows:

html part

<p id="app" class="container">
 <table class="table table-bordered">
 <p v-for = "book in books">
  <tr>
  <th>书名</th>
  <th>书的价格</th>
  <th>书的数量</th>
  <th>小计</th>
  <th>操作</th>
  </tr>
  <tr v-for = "(index,book ) in books">
  <td>{{book.name}}</td>
  <td>{{book.price}}</td>
  <td><button @click="book.count&&book.count--">-</button><input type="text" v-model="book.count" /><button @click="book.count++">+</button></td>
  <td>{{book.price*book.count}}</td>
  <td><button class="btn btn-danger" @click="deleteBook(book)">删除</button></td>
  </tr>
  <tr>
  <td colspan="5">
  总价{{total}}
  </td>
  </tr>
 </p>
 </table>
 <p class="form-group">
 <label for="bookname" id="bookname">书名</label>
 <input type="text" v-model="list.name" class="form-control"/>
 </p>
 <p class="form-group">
 <label for="bookprice" id="bookprice">价格</label>
 <input type="text" v-model="list.price" class="form-control"/>
 </p>
 <p class="form-group">
 <label for="bookcount" id="bookcount">数量</label>
 <input type="text" v-model="list.count" class="form-control"/>
 </p>
 <p class="form-group">
 <button class="btn btn-primary" @click="add">添加</button>
 </p>
 </p>

script part

<script src="js/vue.js"></script>
 <script>
 var vm = new Vue({
 el:"#app",
 data:{
  books:[
  {name:&#39;VUE js&#39;,price:40,count:1},
  {name:&#39;NODE js&#39;,price:20,count:1},
  {name:&#39;REACT js&#39;,price:30,count:1},
  {name:&#39;ANGULAR js&#39;,price:100,count:1},
  {name:&#39;JQUERY js&#39;,price:50,count:1},
  ],
  list:{
  name:&#39;&#39;,
  price:&#39;&#39;,
  count:&#39;&#39;
  }
 },
 methods:{
  deleteBook(book){
  // vue 给我们提供了一个 $remove的方法，在数组中删除
  this.books.$remove(book);
  /*this.books = this.books.filter((item)=>{
  return item != book
  })*/
  },
  add(){
  this.books.push(this.list);
  this.list = {
  name:&#39;&#39;,
  price:&#39;&#39;,
  count:&#39;&#39;
  }
  }
 },
 computed:{
  total(){
  var sum = 0;
  this.books.forEach(item =>{
  sum += item.price*item.count;
  })
  return sum;
  }
 }
 });
</script>

Summary of difficulties encountered

When the quantity is less than 0, there are many judgment methods and solutions. The following summarizes 3 methods

(1) The simplest method

Based on logical judgment, pay attention to the order of logical judgment here, the code is as follows:

Copy code The code is as follows:

b6c5a531a458a2e790c1fd6421739d1c4179bd8b60b988f19df1ccadb093a205-65281c5ac262bf6d81768915a4a77ac0e9bf83320d1a7c32cd980bfbdb6ac100be59ca2c6fdfb6f4fe9580b4ae57cf4b+65281c5ac262bf6d81768915a4a77ac0b90dd5946f0946207856a8a37f441edf

(2) Pay attention here this points to the question

Copy code The code is as follows:

b6c5a531a458a2e790c1fd6421739d1c84574a5af5a877d67541393b14594ae3-65281c5ac262bf6d81768915a4a77ac02e252e5afab52b58f4c1398a7e2222d2be59ca2c6fdfb6f4fe9580b4ae57cf4b+65281c5ac262bf6d81768915a4a77ac0< ;/td>

methods:{
  min(index){
  if(this.books[index].count>0){
  this.books[index].count = parseInt(this.books[index].count) - 1;
  }
  },
  deleteBook(book){
  // vue 给我们提供了一个 $remove的方法，在数组中删除
  this.books.$remove(book);
  /*this.books = this.books.filter((item)=>{
  return item != book
  })*/
  },
  add(){
  this.books.push(this.list);
  this.list = {
  name:'',
  price:'',
  count:''
  }
  }
 }

(3) Parameter passing problem during v-on execution

Copy code The code is as follows:

b6c5a531a458a2e790c1fd6421739d1ce13d7c23e70a8fe55e3877551ed2812b-65281c5ac262bf6d81768915a4a77ac09c17b84def4107c05daadce6eb1528e1be59ca2c6fdfb6f4fe9580b4ae57cf4b+65281c5ac262bf6d81768915a4a77ac0b90dd5946f0946207856a8a37f441edf

min(book){
 if(book.count>0){
 book.count = parseInt(book.count) - 1;
 }
}

Summary:

When v-on needs to pass parameters when executing a method, add (). If you don’t need to pass parameters, you don’t need to add ().
If you need to pass parameters, we You need to manually pass in the event source

Related recommendations:

Detailed steps for creating a book management platform using vue.js

Library management system source code php generates random verification code image code

Node.js close to actual combat (2) book management system_html/css_WEB-ITnose

The above is the detailed content of Vue implementation of book management examples. For more information, please follow other related articles on the PHP Chinese website!