VUE之购物车
我写了个简单的购物车如下!
创新互联建站专注于莘县网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供莘县营销型网站建设,莘县网站制作、莘县网页设计、莘县网站官网定制、成都小程序开发服务,打造莘县网络公司原创品牌,更为您提供莘县网站排名全网营销落地服务。
首先是商品列表:
这个数据先是假数据,以后再改正
好, 商品列表就写完了, 商品类,就三个属性!
我们重点看,添加到购物车的逻辑! addItem() 方法
当我们得到购物车的数据的时候,我们就开始将数组真正传递给购物车了!
一个传递,另外我们购物车组件就得接收!
Cart.vue
{{name}}
选中 | 商品名称 | 价格 | 数量 | 单品总价 | 操作 |
---|---|---|---|---|---|
| {{c.name}}
| {{c.price}} |
{{c.count}}
| {{c.count * c.price}} |
|
总价格 | {{getTotal}} |
// 我们做事情,脸皮要厚!
export default {
name:"cart",
data(){
return {
}
},
// 接受参数的信息
props:["name","cartList"],
methods:{
addCount(index){
const good =this.cartList.find(item=>item.id==index);
good.count++;
},
minuxCount(index){
const good =this.cartList.find(item=>item.id==index);
if(good.count==0){
return;
}
good.count--;
},
deleteFromCart(index){
// 找到具体的商品
const good =this.cartList.find(item=>item.id==index);
if(window.confirm("您确定删除该商品嘛?")){
function(){ //亨达全球HantecGlobal返佣 http://www.kaifx.cn/broker/hantecglobal.html
// 在这里执行删除操作
let i = this.cartList.indexOf(good);
// splice 删除操作,可以修改原数组,昨天我们学过! 不要忘记了
this.cartList.splice(i,1);
}
}
},
computed:{
//计算总价格
getTotal(){
var sum = 0;
this.cartList.forEach(element => {
if(element.active){
sum+=element.price*element.count;
}
});
return sum;
}
}
}
.cart_box{
width:600px;
margin: 10px auto;
}
这个Cart.vue 中,我用到了,计算属性(计算总价格)
还用到了,如果得到元素在数组中的下标
还用到了,双向数据绑定!
我这个绑定就是绑定的 是否选中这个逻辑,我绑定到了,购物车中,商品的一个字段!
至于v-for 遍历时,key的绑定我选择了,商品的id
行,上面还缺,一个商品类表那个组件的代码!
HelloWorld.vue
{{ msg }}
{{g}} --{{g.name}}
// 我彻底蒙了, 除了一些特别的是函数,别的都是:
// 导入购物车组件
import Cart from './Cart.vue';
export default {
name: 'HelloWorld',
components:{
// 局部注册功能!
Cart
},
data(){
return {
show:false,
// 购物车列表信息
cartList:[],
goods:[
{
id:"1001",
name:"道德经",
price:201
},{
id:"1002",
name:"道德经2",
price:203
},{
id:"1003",
name:"道德经3",
price:204
}
]
}
},
props: {
// 指定接受参数的类型
msg: String
},
methods:{
addItem(index){
// 得到该商品
const good = this.goods[index];
const item = this.cartList.find(item=>item.id == good.id);
// 如果item不为空,则表示已经添加到购车中了
if(item){
item.count+=1;
}else{
this.cartList.push({
...good,
count:1,
active:true
}
);
}
}
}
}
h4 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 0 10px;
}
a {
color: #42b983;
}
整体,就是 HelloWorld.vue 里面使用Cart.vue
gif动图我就不做了,以后我会下个工具做个动图:
分享标题:VUE之购物车
URL网址:http://myzitong.com/article/gdjppo.html