作业:购物车

<div id="itany">
        <table border='1' bordercolor='black' cellspacing='0'>
                <tr>
                    <th>数量</th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>总价</th>
                </tr>
                <tr v-for='(value,index) in arr'>
                    <td>{{index+1}}</td>
                    <td>{{value.name}}</td>
                    <td>${{value.money}}</td>
                    <td>
                        <button v-on:click="clear(index)">-</button>
                        {{value.how}}
                        <button v-on:click="add(index)">+</button>
                    </td>
                    <td>{{value.price}}</td>
                </tr>
                <tr>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                    <td>总价{{all}}</td>
                </tr>
        </table>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#itany',
            data:{
                arr:[
                    {name:"kar98k",money:3999,how:0,price:0},
                    {name:"M4A1",money:2890,how:0,price:0},
                    {name:"AWM",money:3259,how:0,price:0},
                ],
                all:0
            },
            methods:{
                clear:function(i){
                    if(this.arr[i].how>=1){
                        this.arr[i].how-=1,
                        this.arr[i].price=this.arr[i].how*this.arr[i].money,
                       this.all-=this.arr[i].money
                    }
                },
                add:function(i){
                    this.arr[i].how+=1,
                        this.arr[i].price=this.arr[i].how*this.arr[i].money,
                        this.all+=this.arr[i].money
                }
            }
        })
    </script>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容