Implémentation de Vue d'exemples de gestion de livres

Cet article présente principalement Vue pour implémenter la gestion des bibliothèques, partage les points de connaissances utilisés dans la démonstration de gestion des bibliothèques et résume les problèmes rencontrés. Il a une certaine valeur de référence. J'espère qu'il pourra aider tout le monde. .

Les projets futurs de l'entreprise nécessitent l'utilisation des connaissances de vue.js. Je ne l'ai pas appris en Angular, je ne connais que peu de choses sur node.js et sur React, il est donc difficile de l'apprendre. Si vous souhaitez acquérir des connaissances sur vue.js, le site Web recommandé : http://vuejs.org/

Les détails sont les suivants :

1. Points de connaissances pour la gestion des bibliothèques. démo

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

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

Le code spécifique est comme suit :

partie html

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

partie script

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

Résumé des difficultés rencontrées

Lorsque la quantité est inférieure à 0, il existe de nombreuses façons de la juger et de la résoudre. 3 méthodes

(1) La méthode la plus simple

Basé sur le jugement logique, faites attention à l'ordre du jugement logique ici, le code est comme suit :

Copier le code Le code est le suivant :

b6c5a531a458a2e790c1fd6421739d1c4179bd8b60b988f19df1ccadb093a205 -65281c5ac262bf6d81768915a4a77ac02e252e5afab52b58f4c1398a7e2222d2be59ca2c6fdfb6f4fe9580b4ae57cf4b+65281c5ac262bf6d81768915a4a77ac0b90dd5946f0946207856a8a37f441edf

(deux) Ici, vous devez faire attention au problème signalé par ceci

Copier le code Le code est comme suit :

b6c5a531a458a2e790c1fd6421739d1c6096dc2ee64528cac5aa7636aea78603-65281c5ac262bf6d81768915a4a77ac082aa68c872aa5298c9f8d522c5a807e6e8e34100811d2e61118de430baeee171+88f1f6c23f270ef5f937d3b767f69955b90dd5946f0946207856a8a37f441edf

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) Problème de passage des paramètres lors de l'exécution de v-on

Copier le code Le code est le suivant :

1f0456c14408d70e4a56ae7616c82105-65281c5ac262bf6d81768915a4a77ac0ea7b32b118b5636667cd826525f4473f29226baacb0dc1a36e823b3243492380+65281c5ac262bf6d81768915a4a77ac0b90dd5946f0946207856a8a37f441edf

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

Résumé :

Quand v- on exécute une méthode, add () lorsque vous devez transmettre des paramètres. Si vous n'avez pas besoin de transmettre des paramètres, vous n'avez pas besoin d'ajouter ()
Si des paramètres doivent être transmis, nous devons les transmettre manuellement. la source de l'événement

Recommandations associées :

Étapes détaillées pour créer une plateforme de gestion de livres avec vue.js

Gestion de livres le code source du système php génère un code de vérification aléatoire code image

Node.js Close to Practical Combat (2) Book Management System_html/css_WEB-ITnose

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!