我写了个简单的购物车如下！
首先是商品列表：
这个数据先是假数据，以后再改正
好， 商品列表就写完了， 商品类，就三个属性！
我们重点看，添加到购物车的逻辑！ addItem() 方法
当我们得到购物车的数据的时候，我们就开始将数组真正传递给购物车了！
一个传递，另外我们购物车组件就得接收！
Cart.vue
<template>
<div>
<h3>{{name}}</h3>
<!--购物车列表 -->
<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("您确定删除该商品嘛？")){
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;
}
}
}
</script>
<style scoped>
.cart_box{
width:600px;
margin: 10px auto;
}
</style>
这个Cart.vue 中，我用到了，计算属性（计算总价格）
还用到了，如果得到元素在数组中的下标
还用到了，双向数据绑定！
我这个绑定就是绑定的 是否选中这个逻辑，我绑定到了，购物车中，商品的一个字段！
至于v-for 遍历时，key 的绑定我选择了，商品的id
行，上面还缺，一个商品类表那个组件的代码！
HelloWorld.vue
<template>
<!-- 每个组件必须有一个根组件，这点要明确的知道！ -->
<div>
<h2>{{ msg }}</h2>
<!-- 商品列表信息 -->
<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>
h4 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
整体，就是 HelloWorld.vue 里面使用 Cart.vue
gif动图我就不做了，以后我会下个工具做个动图：