【jsp实现购物车功能】Vuejs实现购物车功能

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

功能概述

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

上一张截图，如下：

代码

代码分成三部分，分别是HTML、JS、CSS。关键的是HTML和JS。

HTML

 
  
  
  <script src="../js/vue.min.js"></script>
  
 
 
  
   
   购物车为空！
  

  <script src="../js/cart.js"></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 < 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;
}

【jsp实现购物车功能】Vuejs实现购物车功能

http://m.bbyears.com/jiaocheng/141152.html

推荐访问:购物车功能的实现