vue.基础购物车功能详细制作

vue实现购物车功能.可以对购物车进行编辑、添加、删除等功能。

根据增加商品数量、减少商品数量、移除商品动态更新 总价格。

HTML部分

<div id="app" v-cloak>
        <table width="500" border="2">
            <tr id="head" align="center">
                <th>{
    {name}}</th>
                <th>{
    {price}}</th>
                <th>{
    {number}}</th>
                <th>{
    {Operation}}</th>
            </tr>
            <tr align="center" v-for="(item,index) in list" :style="item.number>0?'background-color:red':''">
                <td>{
    {item.name}}</td>
                <td>￥:{
    {item.price}}</td>
                <td>
                    <button @click="decrease(index)" style="display:none;" v-show="item.number >= 1">-</button>
                    <span>{
    {item.number}}</span>
                    <button @click="increase(index)">+</button>
                </td>
                <td>
                    <button @click="editor(index)">编辑</button>
                    <button @click