Vue-Implementierung von Buchverwaltungsbeispielen

Dieser Artikel stellt hauptsächlich die Implementierung der Bibliotheksverwaltung in Vue vor, teilt die in der Bibliotheksverwaltungsdemo verwendeten Wissenspunkte und fasst die aufgetretenen Probleme zusammen. Interessierte Freunde können darauf verweisen alle. .

Zukünftige Projekte des Unternehmens erfordern die Verwendung von vue.js-Kenntnissen. Ich weiß nur wenig über node.js und reagiere, daher ist es schwierig, es zu lernen Es. Wenn Sie vue.js-Wissen erlernen möchten, empfehlen wir die Website: http://vuejs.org/

Die Details lauten wie folgt:

1. Wissenspunkte für die Bibliotheksverwaltung Demo

1. Bootstrap: http://getbootstrap.com/

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

Der spezifische Code ist wie folgt:

HTML-Teil

<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>

Skriptteil

<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>

Zusammenfassung der auftretenden Schwierigkeiten

Wenn die Menge kleiner als 0 ist, gibt es viele Möglichkeiten, das Problem zu beurteilen und zu lösen. Im Folgenden wird zusammengefasst 3 Methoden

(1) Die einfachste Methode

Basierend auf logischer Beurteilung, achten Sie hier auf die Reihenfolge der logischen Beurteilung, der Code ist wie folgt:

Code kopieren Der Code lautet wie folgt:

b6c5a531a458a2e790c1fd6421739d1c4179bd8b60b988f19df1ccadb093a205 -65281c5ac262bf6d81768915a4a77ac02e252e5afab52b58f4c1398a7e2222d2be59ca2c6fdfb6f4fe9580b4ae57cf4b+65281c5ac262bf6d81768915a4a77ac0b90dd5946f0946207856a8a37f441edf

(zwei) Hier sollten Sie auf das dadurch aufgezeigte Problem achten

Code kopieren Der Code ist wie folgt folgt:

b6c5a531a458a2e790c1fd6421739d1c6096dc2ee64528cac5aa7636aea78603-65281c5ac262bf6d81768915a4a77ac082aa68c872aa5298c9f8d522c5a807e6be59ca2c6fdfb6f4fe9580b4ae57cf4b+120d611986108da972f06c8ab0c8bab5b90dd5946f0946207856a8a37f441edf

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übergabeproblem während der v-on-Ausführung

Code kopieren Der Code lautet wie folgt:

21911e12b0f81111d45b6652d5c0e200-65281c5ac262bf6d81768915a4a77ac0ea7b32b118b5636667cd826525f4473f2fd50c199b654d64003e17b5b568de74+65281c5ac262bf6d81768915a4a77ac0b90dd5946f0946207856a8a37f441edf

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

Zusammenfassung:

Wenn v- on führt eine Methode aus, add(), wenn Sie Parameter übergeben müssen. Wenn Sie keine Parameter übergeben müssen, müssen Sie nicht add() verwenden.
Wenn Parameter übergeben werden müssen, müssen wir diese manuell übergeben die Ereignisquelle

Verwandte Empfehlungen:

Detaillierte Schritte zum Erstellen einer Buchverwaltungsplattform mit vue.js

Buchverwaltung System-Quellcode PHP generiert zufälligen Bestätigungscode, Bildcode

Node.js nah am tatsächlichen Kampf (2) Buchverwaltung system_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonVue-Implementierung von Buchverwaltungsbeispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!