浏览器界面

image.png

代码如下

style 设置

<style type="text/css">
            table{
                width: 600px;
                border-collapse: collapse;
                font-family: "楷体";
            }
            td,th{
                border: 1px solid #ccc;
                text-align: center;
                padding: 5px;
            }
            tr:nth-child(even){
                background-color: #f5f5f5;
            }
            tr:nth-child(odd){
                background-color: 'pink';
            }
        </style>

div 设置

<div id="app">
    <table border="1px" align="center" style="text-align: center">
        <tr>
            <th width="100">编号</th>
            <th width="100">名称</th>
            <th width="100">单价</th>
            <th width="100">数量</th>
            <th width="100">操作</th>
        </tr>
        <tr v-for="(item,index) in items">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>
                <button @click="minus(index)" :disabled="ban(index)">-</button>
                {{item.number}}
                <button @click="plus(index)">+</button>
            </td>
            <td>
                <button @click="del(index)">删除</button>
            </td>
        </tr>
        <tr>
            <td colspan="5" id="sum">总金额:{{sum()}}</td>
        </tr>
    </table>
</div>

script 设置

<script>
    var app = new Vue({
        el: "#app",//绑定

        data: {
            items: [{           //数组存储商品信息
                name: "锤子",
                price: "10",
                number: 1
            }, {
                name: "毛线",
                price: "20",
                number: 1
            }, {
                name: "铲铲",
                price: "15",
                number: 1
            }]
        },
        methods: {
            sum: function () {//遍历数组,计算总金额
                var s = 0;
                for (var i = 0; i < this.items.length; i++) {
                    s += this.items[i].price * this.items[i].number;
                }
                ;
                return s;
            },
            minus: function (index) {//商品减少
                this.items[index].number--;
            },
            plus: function (index) {//商品增加
                this.items[index].number++;
            },
            del: function (index) {//删除记录
                this.items[index].number = 0;
                this.items.splice(index, 1);
            },
            ban: function (index) {//当商品数量为1时禁用按钮
                var flag = false;
                if (this.items[index].number <= 1) {
                    flag = true;
                } else {
                    flag = false;
                }
                return flag;
            }
        }
    });
</script>