本文实例为大家分享了Vuejs购物车实现代码,供大家参考,具体内容如下
html:
我的vue购物车 我的购物车: 商品名称 商品单价 商品数量 操作 {{item.name}} {{item.price}} + {{item.count}} - 移除 清单: 商品总价:{{price |currency '$' 2}} 您的购物车空了是否去重新挑选
重新挑选
css:
h3{
text-align: center;
}
.left{
margin-left: 14%;
}
.item{
text-align: center;
padding: 3%;
}
.add{
margin-left: 15%;
}
.off{
background-color: lightgrey;
border: 1px solid lightgrey;
}
js:
var data = [
{
name:'IPhone 6',
price:5466,
id:1,
count:1
},
{
name:'IMac',
price:7466,
id:2,
count:1
},
{
name:'iPad',
price:5400,
id:3,
count:1
}
]
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。



