购物车

Vue 2019-10-05 698

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>购物车示例</title>  
    <style>  
        table{  
            border: 1px solid;  
            width: 500px;  
            border-collapse: collapse;  
            text-align: center;  
        }  
        td, th{  
            border: 1px solid #d4d4d4;  
            min-width: 24px;  
        }  
        button{  
            cursor: pointer;  
        }  
    </style>  
</head>  
<body>  
    <div id="app" v-cloak>  
        <template v-if="list.length">  
            <table >  
                <thead>  
                    <tr>  
                        <th></th>  
                        <th>商品名称</th>  
                        <th>商品单价</th>  
                        <th>购买数量</th>  
                        <th>操作</th>  
                        <th>全选<input type="checkbox" @click="checkAll()"></th>  
                    </tr>  
                </thead>  
                <tbody>  
                    <tr v-for="(item, index) in list">  
                        <td>{{index+1}}</td>  
                        <td>{{item.name}}</td>  
                        <td>{{item.price}}</td>  
                        <td>  
                            <button @click="handleReduce(index)" :disabled="item.count===1">-</button>  
                            {{item.count}}  
                            <button @click="handleAdd(index)" :disabled="item.count===100">+</button>  
                        </td>  
                        <td>  
                            <button @click="handleRemove(index)">移除</button>  
                        </td>  
                        <td><input type="checkbox" :checked="item.check===true" @click="handleSinleCheck(index)"></td>  
                    </tr>  
                </tbody>  
            </table>  
            <div>总价:¥{{totalPrice}}</div>  
        </template>  
        <div v-else>购物车为空</div>  
    </div>  
</body>  
<script src="../../vue.js"></script>  
<script>  
    var app = new Vue({  
        el: '#app',  
        data: {  
            message: 'Hello Vue',  
            list: [  
                {"id": 1, "name": 'iphoneXr', "price": 5555, "count": 1, 'check': false},  
                {"id": 2, "name": 'iphoneX', "price": 5055, "count": 1, 'check': false},  
                {"id": 3, "name": 'iphone11', "price": 6055, "count": 1, 'check': false},  
            ]  
        },  
        computed: {  
            // 总价  
            totalPrice: function () {  
                var total = 0;  
                for(var i=0; i<this.list.length;i++){  
                    if(this.list[i].check === true){  
                        var item = this.list[i];  
                        total += item.price * item.count;  
                    }  
                }  
                return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');  
            }  
        },  
        methods: {  
            // 处理商品数量 减  
            handleReduce: function (index) {  
                if(this.list[index].count===1) return;  
                this.list[index].count --;  
            },  
            // 加  
            handleAdd: function (index) {  
                if(this.list[index].count===100) return;  
                this.list[index].count ++;  
            },  
            // 移除商品  
            handleRemove:function (index) {  
                this.list.splice(index, 1);  
            },  
            // 全选  
            checkAll: function () {  
                for(var i=0; i<this.list.length; i++){  
                    this.list[i].check= !this.list[i].check;  
                }  
            },  
            // 单选  
            handleSinleCheck: function (index) {  
                this.list[index].check = !this.list[index].check;  
            }  
        }  
    })  
</script>  
</html> 

效果:

js里有个三元运算符 ?:
作用是判断?前的语句是否为真,为真则执行中间的语句,否则执行后面的语句
如:confirm("你是谁?")?alert("你是光"):alert("你是电!")

标签:Vue

文章评论

评论列表

已有0条评论