suchen

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie die Warenkorbfunktion in Vuejs

So implementieren Sie die Warenkorbfunktion in Vuejs

php中世界最好的语言
php中世界最好的语言Original
2018-05-24 09:20:213364Durchsuche

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>

JS

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

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

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie den Timer, um die Countdown-Funktion in js zu implementierenNächster Artikel：So verwenden Sie den Timer, um die Countdown-Funktion in js zu implementieren

In Verbindung stehende Artikel

Mehr sehen