Comment implémenter la fonction de panier d'achat dans Vuejs-js tutoriel-php.cn

Comment implémenter la fonction de panier d'achat dans Vuejs

php中世界最好的语言

Libérer： 2018-05-24 09:20:21

original

3370 Les gens l'ont consulté

Cette fois, je vais vous montrer comment implémenter la fonction de panier dans Vuejs. Quelles sont les précautions pour implémenter la fonction de panier dans Vuejs. Ce qui suit est un cas pratique, prenons. un regard.

Commencez à mettre à jour les blogs liés au framework front-end Vue.JS.

Aperçu des fonctions

J'ai acquis quelques connaissances de base de Vue.JS et j'utilise maintenant ces connaissances de base des instructions et de la liaison de données pour développer une fonction simple de panier d'achat. Les points clés de la fonction sont les suivants :
(1) Afficher le nom, le prix unitaire et la quantité du produit
(2) La quantité du produit peut être augmentée et diminuée
(3) ; ) Le prix total du panier doit être mis à jour en temps réel, c'est-à-dire la quantité. S'il y a un changement, le prix total changera également en conséquence
(4) Le produit peut être retiré du panier ;
(5) Il dispose d'une fonction de sélection et calcule uniquement le prix total du produit sélectionné.

Code

Le code est divisé en trois parties, à savoir HTML, JS et CSS. La clé est HTML et JS.

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Vue 购物车</title>
  <script src="../js/vue.min.js"></script>
  <link href="../css/cart.css" rel="external nofollow" rel="stylesheet">
 </head>
 <body>
  <p id="app" v-cloak>
   <template v-if="list.length">
    <table>
     <thead>
      <tr>
       <th><input type="checkbox" v-on:click="swapCheck" v-model="checked"></th>
       <th>商品名称</th>
       <th>商品单价</th>
       <th>商品数量</th>
       <th>操作</th>
      </tr>      
     </thead>
     <tbody>
      <tr v-for="(item,index) in list">
       <td><input type="checkbox" v-model="selectList" :id="item.id" :value="index" name="selectList" ></td>
       <td>{{ item.name }}</td>
       <td>{{ item.price }}</td>
       <td>
        <button @click="handleReduce(index)" :disabled="item.count === 1">-</button>
        {{ item.count }}
        <button @click="handleAdd(index)">+</button>
       </td>
       <td><button @click="handleRemove(index)">移除</button></td>
      </tr>
     </tbody>
    </table>
    <p>总价：￥ {{ totalPrice }}</p>
   </template>
   <p v-else>购物车为空！</p>
  </p>
  <script src="../js/cart.js"></script>
 </body>
</html>

Copier après la connexion

var app = new Vue({
 el:'#app',
 data:{
  list:[
   {
    id:1,
    name:'iPhone 8',
    price:8888,
    count:1
   },
   {
    id:2,
    name:'Huwei Mate10',
    price:6666,
    count:1
   },
   {
    id:3,
    name:'Lenovo',
    price:6588,
    count:1
   }
  ],
  selectList:[],
  checked:false
 },
 computed:{
  totalPrice:function(){
   var total = 0;
   for(var i = 0,len = this.selectList.length;i < len;i++){
    var index = this.selectList[i];
    var item = this.list[index];
    if(item){
     total += item.price * item.count;
    }
    else{
     continue;
    }
   }
   return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
  }
 },
 methods:{
  handleReduce:function(index){
   var item = this.list[index];
   if(item.count < 2){
    return;
   }
   item.count--;
  },
  handleAdd:function(index){
   var item = this.list[index];
   item.count++;
  },
  handleRemove:function(index){
   this.list.splice(index,1);
  },
  swapCheck:function(){
   var selectList = document.getElementsByName('selectList');
   var len = selectList.length;
   if(this.checked){
    for(var i = 0;i < len;i++){
     var item = selectList[i];
     item.checked = false;
    }
    this.checked = false;
    this.selectList = [];
   }
   else{
    for(i = 0;i < len;i++){
     item = selectList[i];
     if(item.checked === false){
      item.checked = true;
      this.selectList.push(selectList[i].value);
     }
    }
    this.checked = true;
   }
  }
 }
});

Copier après la connexion

CSS

[v-cloak]{
 display: none;
}
table{
 border: 1px solid black;
 border-collapse: collapse;
 border-spacing: 0;
 empty-cells: show;
}
th,td{
 padding: 8px 16px;
 border:1px solid black;
 text-align: center;
}
th{
 background-color: gray;
}

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

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!