Vue

by 朱 茱霞

HTML

<div class="container" id="app">

        <table class="table" v-if="dataList.length">
            <thead>
                <tr>
                    <th>产品编号</th>
                    <th>产品名称</th>
                    <th>购买数量</th>
                    <th>产品单价</th>
                    <th>产品总价</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in dataList" :key='item.id'>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>
                        <input @click="update(item,'sub')" type="button" value="-" class="btn btn-danger">
                        <!-- 不使用$watch -->
                        <input type="text" size="4" :value="item.quanity" @input="inputFn(item,$event)"> 
                        <input @click="update(item,'add')" type="button" value="+" class="btn btn-danger">
                    </td>
                    <td>￥{{ item.price }}</td>
                    <td>￥{{ item.price * item.quanity }}</td>
                    <td>
                        <input type="button" value="移除" class="btn btn-danger"  @click="update(item,'del')">
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td></td>
                    <td></td>
                    <td>总数：{{ getQty }}</td>
                    <td></td>
                    <td>总价格：￥{{ getTotalPirce }}</td>
                    <td>
                        <input type="button" value="清空购物车" class="btn btn-danger"  @click="update('','delAll')">
                    </td>
                </tr>
            </tfoot>
        </table>
        <div v-if="!dataList.length">
            请选购您所需的商品
        </div>
    </div>

Vue

var app = new Vue({
    el:'#app',
    data:{
        dataList:[
            {
                id:1001,
                name:'iphone5',
                quanity:4,
                price:4999
            },
            {
                id:1002,
                name:'iphone5s',
                quanity:6,
                price:5999
            },
            {
                id:1003,
                name:'iphone6',
                quanity:3,
                price:4999
            },
            {
                id:1004,
                name:'iphone6s',
                quanity:7,
                price:7999
            },
        ]
    },
    computed:{
        getQty(){
            var total = 0
            this.dataList.forEach(element => {
                total+= parseInt( element.quanity )
            });
            return total; 
        },
        getTotalPirce(){
            var totalPriece = 0
            this.dataList.forEach(element => {
                totalPriece += parseInt( element.quanity ) * parseInt( element.price )
            });
            return totalPriece; 
        }
    },
    methods:{
        update(item,todo){
            let datalistCopy = JSON.parse(JSON.stringify(this.dataList)) 
            let itemCopy = JSON.parse(JSON.stringify(item))
            if( todo == 'add' ){
                if(itemCopy.quanity >= 10 ){
                    alert('只能在1到10')
                    return;
                }
                itemCopy.quanity++
            } else if( todo == 'sub'){
                if( itemCopy.quanity > 1 ){              
                    itemCopy.quanity--
                } else {
                    if( confirm('是否删除此物品')){
                        datalistCopy.splice(this.dataList.indexOf(item),1)
                    }
                }
            } else if( todo == 'del'){
                if( confirm('是否删除此物品？')){
                    datalistCopy.splice(this.dataList.indexOf(item),1)
                }
            } else if(...