Vue.js实战 5.5章 购物车 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>购物车示例</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="style.css" rel="stylesheet">
    </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>
                    </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)">+</button>
                        </td>
                        <td>
                            <button @click="handleRemove(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div>总价：￥ {{ totalPrice }}</div>
        </template>
        <div v-else>购物车为空</div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                list:[
                    {
                        id:1,
                        name:'iphone 7',
                        price:6188,
                        count:1
                    },
                    {
                        id:2,
                        name:'ipad pro',
                        price:5888,
                        count:1
                    },
                    {
                        id:3,
                        name:'MacBook Pro',
                        price:21488,
                        count:1
                    }
                ]
            },
            computed:{
                //计算属性
                totalPrice:function(){
                    var total=0;
                    for(var i=0;i<this.list.length;i++)
                    {
                        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){
                    this.list[index].count++;
                },
                //删除
                handleRemove:function(index)
                {
                    this.list.splice(index,1)
                }
            }
        });
    </script>
    </body>
</html>
index.html

 

[v-cloak]{
    display: none;
}
table{
    border:1px solid #e9e9e9;
    border-collapse: collapse;/* 表格合并边框模型 */
    border-spacing: 0;
    empty-cells: show;/* 显示表格中空单元格上的边框和背景 */
}
th,td{
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: center;
}
th{
    background: #f7f7f7;
    color: #5c6b77;
    font-weight: bold;
    white-space: nowrap;/*规定段落中的文本不进行换行：*/
}
style.css

 

最终效果：

posted @ 2017-10-25 23:36  高山-景行  阅读(256)  评论(0)  编辑  收藏  举报