I wrote a simple shopping cart below!
First Product List:
This data first false data, correct later
Well, commodity list on the finished, commodity, on three properties!
We look at the focus, Add to cart logical! addItem () method
When we get the shopping cart data, we started to really pass the array to the shopping cart!
A transfer, and we have to cart component receives!
Cart.vue
<template>
<div>
<h2>{{name}}</h2>
<-! Cart List ->
<table>
<tr>
<th> Select </ th>
<th> Product name </ th>
<th> Price </ th>
<th>数量</th>
<th> single product Total </ th>
<th> operation </ th>
</tr>
<tr v-for = " c in cartList" :key = "c.id">
<td>
<! - two-way data binding ->
<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> Total price </ td>
<! - wording of calculating an attribute ->
<td colspan="5">{{getTotal}}</td>
</tr>
</table>
</div>
</template>
<script>
// we do things, thick skin!
export default {
name:"cart",
data(){
return {
}
},
// receive information parameters
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>
<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动图我就不做了，以后我会下个工具做个动图：