感谢大家的支持,我会继续努力学习,认真学习,天天向上,在这个月内,不端的学习大前端知识, 说白了,就是狂补 js 的知识
我写了个简单的购物车如下!
首先是商品列表:
这个数据先是假数据,以后再改正
好, 商品列表就写完了, 商品类,就三个属性!
我们重点看,添加到购物车的逻辑! addItem() 方法
当我们得到购物车的数据的时候,我们就开始将数组真正传递给购物车了!
一个传递,另外我们购物车组件就得接收!
Cart.vue
<template>
<div class="cart_box">
<h2>{{name}}</h2>
<!--购物车列表 -->
<table>
<tr>
<th>选中</th>
<th>商品名称</th>
<th>价格</th>
<th>数量</th>
<th>单品总价</th>
<th>操作</th>
</tr>
<tr v-for = " c in cartList" :key = "c.id">
<td>
<!-- 双向数据绑定 -->
<input type="checkbox" v-model="c.active">
</td>
<td>
{{c.name}}
</td>
<td>{{c.price}}</td>
<td>
<button @click = "addCount(c.id)">add</button>
{{c.count}}
<button @click = "minuxCount(c.id)">minus</button>
</td>
<td>{{c.count * c.price}}</td>
<td>
<button @click = "deleteFromCart(c.id)">删除</button>
</td>
</tr>
<tr v-if="this.cartList.length">
<td>总价格</td>
<!-- 计算属性的写法 -->
<td colspan="5">{{getTotal}}</td>
</tr>
</table>
</div>
</template>
<script>
// 我们做事情,脸皮要厚!
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("您确定删除该商品嘛?")){
// 在这里执行删除操作
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;
}
}
}
</script>
<style scoped>
.cart_box{
width:600px;
margin: 10px auto;
}
</style>
这个Cart.vue 中,我用到了,计算属性(计算总价格)
还用到了,如果得到元素在数组中的下标
还用到了,双向数据绑定!
我这个绑定就是绑定的 是否选中这个逻辑,我绑定到了,购物车中,商品的一个字段!
至于v-for 遍历时,key 的绑定我选择了,商品的id
行,上面还缺,一个商品类表那个组件的代码!
HelloWorld.vue
<template>
<!-- 每个组件必须有一个根组件,这点要明确的知道! -->
<div class="hello">
<h1>{{ msg }}</h1>
<!-- 商品列表信息 -->
<ul>
<li v-for="(g,index) in goods" :key="index">
{{g}} --{{g.name}}
<button @click = "addItem(index)">添加到购物车</button>
</li>
</ul>
<!-- 购物车信息 -->
<!-- 使用注册进来的组件 -->
<cart name="action" :cartList="cartList"></cart>
</div>
</template>
<script>
// 我彻底蒙了, 除了一些特别的是函数,别的都是:
// 导入购物车组件
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
}
);
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
整体,就是 HelloWorld.vue 里面使用 Cart.vue
gif动图我就不做了,以后我会下个工具做个动图: