So implementieren Sie die Warenkorbfunktion in Vuejs-js-Tutorial-php.cn

So implementieren Sie die Warenkorbfunktion in Vuejs

php中世界最好的语言

Freigeben： 2018-05-24 09:20:21

Original

3370 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie die Warenkorbfunktion in Vuejs implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung der Warenkorbfunktion in Vuejs? ein Blick.

Beginnen Sie mit der Aktualisierung von Blogs im Zusammenhang mit dem Front-End-Framework Vue.JS.

Funktionsübersicht

Ich habe einige Grundkenntnisse von Vue.JS erlernt und nutze diese Grundkenntnisse über Anweisungen und Datenbindung nun, um eine einfache Warenkorbfunktion zu entwickeln. Die wichtigsten Punkte der Funktion sind:
(1) Anzeige des Namens, des Stückpreises und der Menge des Produkts
(2) Die Menge des Produkts kann erhöht und verringert werden
(3 ) Der Gesamtpreis des Warenkorbs muss in Echtzeit aktualisiert werden, d. h. die Menge. Bei einer Änderung ändert sich auch der Gesamtpreis entsprechend
(4) Das Produkt kann aus dem Warenkorb entfernt werden;
(5) Es verfügt über eine Auswahlfunktion und berechnet nur den Gesamtpreis des ausgewählten Produkts.

Code

Der Code ist in drei Teile unterteilt, nämlich HTML, JS und CSS. Der Schlüssel ist HTML und 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>

Nach dem Login kopieren

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;
   }
  }
 }
});

Nach dem Login kopieren

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

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Warenkorbfunktion in Vuejs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!