首先是先遍历最外层然后写内层的没错我们利用的是嵌套循环的思想来拆解这个双大括号语法就类似C语言中的打印函数printf.目标图按需求——实现商品个数的加减来看我们需要实现一个事件——来控制数量加和减操作。在vue中这种事件操作包含”谁发起这个事件““谁怎么样发起这个事件”“要发起的事件是什么”即who,how,what,,这背后是javaScript它就类似C语言中的函数不过调用时通过绑定的DOM元素激发指定的事件才响应的。这里是对数据元素进行操作我们后面的删除者是对数据项进行操作注意传的参数item in cartlist - item2 in item.items 所以用的是item.items, 在这里就可以看到in和‘.’共同表达了一个嵌套的功能。//删除函数//handleDeletefunction handleDelete(list,id){//list是reactive的数值不能用.value修饰//还有id,它是数组业务逻辑上的索引或可自定义即业务标识逻辑操作上要找的是数组下标const index list.findIndex(i i.id id);if(index -1){list.splice(index,1);}}函数调用的全局变量不用传参了注意在script中写for的遍历逻辑并不能套用template里中的遍历逻辑。清空也是哒我就直接给啦//清空购物车 clearCart//cartlist.item - cartlist.item.splice(0,cartlist.item.length())// function clearCart(){// cartList.item.splice(0,cartList.item.length());// }function clearCart(){for(var i0; icartList.length; i){cartList[i].items.splice(0,cartList[i].items.length);}}对象和数组是要做区分的对象可以看出一个实例化的结构体这种派生的变量而数组是主要包好变量就好不存在这种“实例化”形式。也就是说对象是一种变量而数组是在关注数据的组织形式。数组是在关注数据的组织形式对象是一种变量数组使用是调用小标对象使用时是调用属性调用时使用的符号时[]调用属性时使用的符号是‘.’数值可以直接循环对象要循环只能需要它属性中值为数组的属性不能随意使用那么表头其实就是一个对象而不是数值了。嵌套for循环在template中不能用嵌套的tr去写而是外层写template v-for,再用内层去包住tr v-for,没错这里我们用力一个和template一样的template作为中间层其实好像到了插槽的时候我们就又会和template见面了这里也是和script的区别使用的时候不能那么的任意嵌套的tr一是语法是不建议二是渲染出来的东西也和表头对不齐。script中写for的遍历逻辑template里中的遍历逻辑script中写嵌套循环较任意在template中不能用嵌套的tr去写ADTgname开头的g是good商品的简写OPERATIONcartList; /*数据,数据结构为列表特点...在什么找找*/add(item); /*增加一次item这一项对象里面的计数器count*/sub(item); /*减少一次tem这一项对象里面的计数器count*/handleDelete(list,id) /*删除列表list中的标识id的项*/clearCart(); /*清除cartList里中的所有商品记录*/END ADT以上把逻辑问题都解决掉了ADT这个可以集中概括在写template时也变得非常方便了下面是整理排版的问题之前由于是嵌套tr就让数据和表头一直对不齐。后面我们改善后才整理好之后我们要学会使用rowspan哦让商品类型相同的列合并为一个列。从tr v-if”i0‘ :rowspanITEM.items.length这一部分去看一个标签类似C中的对象或者说是C中的结构体即结构体变类似对象它的成员变量就是对应的属性这里属性的特点是前面有“”符号展开是v-blind那么学习html的构建过程其实是学习采用的对象还用对象的关系类似从C语言变量的基本变量重复再到派生变量。到此我们展示一个二维数组的任务就ok啦。