开始更新前端框架Vue.JS的相关博客。
功能概述
学习了Vue.JS的一些基础知识，现在利用指令、数据绑定这些基础知识开发一个简单的购物车功能。功能要点如下： （1）展示商品的名称、单价和数量； （2）商品的数量可以增加和减少； （3）购物车的总价要实时更新，即数量发生变动，总价也要相应的改变； （4）商品可以从购物车中移除； （5）具有选择功能，只计算选中的商品的总价。
上一张截图，如下：
代码
代码分成三部分，分别是HTML、JS、CSS。关键的是HTML和JS。
HTML
JS
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
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;
}
