Vuejs如何实现购物车功能
这篇文章将为大家详细讲解有关Vuejs如何实现购物车功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
在铁山港等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站建设、成都网站设计 网站设计制作定制开发,公司网站建设,企业网站建设,品牌网站建设,营销型网站,外贸网站建设,铁山港网站建设费用合理。
js有什么特点
1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。
功能概述
学习了Vue.JS的一些基础知识，现在利用指令、数据绑定这些基础知识开发一个简单的购物车功能。功能要点如下：
（1）展示商品的名称、单价和数量；
（2）商品的数量可以增加和减少；
（3）购物车的总价要实时更新，即数量发生变动，总价也要相应的改变；
（4）商品可以从购物车中移除；
（5）具有选择功能，只计算选中的商品的总价。
上一张截图，如下：
代码
代码分成三部分，分别是HTML、JS、CSS。关键的是HTML和JS。
HTML
Vue 购物车
|
商品名称 |
商品单价 |
商品数量 |
操作 |
|
{{ item.name }} |
{{ item.price }} |
-
{{ item.count }}
+
|
移除 |
总价：￥ {{ totalPrice }}
购物车为空！
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;
}关于“Vuejs如何实现购物车功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
网站栏目：Vuejs如何实现购物车功能
路径分享：http://cdxtjz.cn/article/jjgsip.html
