Rumah > Artikel > hujung hadapan web > Vuejs怎样实现购物车功能

Vuejs怎样实现购物车功能

php中世界最好的语言asal: 2018-05-24 09:20:213365semak imbas

这次给大家带来Vuejs怎样实现购物车功能，Vuejs实现购物车功能的注意事项有哪些，下面就是实战案例，一起来看一下。

开始更新前端框架Vue.JS的相关博客。

功能概述

学习了Vue.JS的一些基础知识，现在利用指令、数据绑定这些基础知识开发一个简单的购物车功能。功能要点如下：
（1）展示商品的名称、单价和数量；
（2）商品的数量可以增加和减少；
（3）购物车的总价要实时更新，即数量发生变动，总价也要相应的改变；
（4）商品可以从购物车中移除；
（5）具有选择功能，只计算选中的商品的总价。

代码

代码分成三部分，分别是HTML、JS、css。关键的是HTML和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>

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Atas ialah kandungan terperinci Vuejs怎样实现购物车功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：js如何使用定时器实现倒计时功能Artikel seterusnya：JS实现音乐切换播放以及轮流播放

Artikel berkaitan

Lihat lagi