Vuejs如何實現購物車功能

這次為大家帶來Vuejs怎樣實現購物車功能，Vuejs實現購物車功能的注意事項有哪些，以下就是實戰案例，一起來看一下。

開始更新前端框架Vue.JS的相關部落格。

功能概述

學習了Vue.JS的一些基礎知識，現在利用指令、資料綁定這些基礎知識開發一個簡單的購物車功能。功能要點如下：
（1）顯示商品的名稱、單價和數量；
（2）商品的數量可以增加和減少；
（3）購物車的總價要即時更新，即數量發生變動，總價也要相應的改變；
（4）商品可以從購物車中移除；
（5）具有選擇功能，只計算選取的商品的總價。

程式碼

程式碼分成三部分，分別是HTML、JS、css。關鍵的是HTML和JS。

HTML

nbsp;html>

 
  <meta>
  <title>Vue 购物车</title>
  <script></script>
  <link>
 
 
  <p>
   <template>
    <table>
     <thead>
      <tr>
       <th><input></th>
       <th>商品名称</th>
       <th>商品单价</th>
       <th>商品数量</th>
       <th>操作</th>
      </tr>      
     </thead>
     <tbody>
      <tr>
       <td><input></td>
       <td>{{ item.name }}</td>
       <td>{{ item.price }}</td>
       <td>
        <button>-</button>
        {{ item.count }}
        <button>+</button>
       </td>
       <td><button>移除</button></td>
      </tr>
     </tbody>
    </table>
    <p>总价：￥ {{ totalPrice }}</p>
   </template>
   </p><p>购物车为空！</p>
  
  <script></script>
 

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 <p style="text-align: left;">
CSS</p><pre class="brush:php;toolbar:false">[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;
}

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

以上是Vuejs如何實現購物車功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！