美文网首页
作业:购物车

作业:购物车

作者: 滚动的小熊 | 来源:发表于2018-09-15 09:32 被阅读0次
<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>

相关文章

网友评论

      本文标题:作业:购物车

      本文链接:https://www.haomeiwen.com/subject/alszgftx.html